Media Query in Safari iOS
The above code does not work in Safari on iPhone 12 Mini and iPhone 13 Mini.
Do we have solution to fix this?
18 Replies
bad syntax?
@media (max-width:375px) and (max-height:812px) you need a min max? or am I crazyI’ve never seen a media query with just “width”. Seems that will only work if the screen is exactly 375, height is exactly 812 and orientation is portrait.
This is my thought too
yea I've never seen that either
was thinking maybe its yet another cursed Tailwind thing
And even if the iPhone mini screen sizes are listed as exactly those dimensions it may not translate exactly to the viewport size on that device. Try adjusting your syntax
Could be worth noting that old of iPhones too that maybe the version of safari is going to prefer
em values better than px value. While not a thing anymore it used to be the only way to be consistent.
that is only if you need the exact pixel break though too. https://zellwk.com/blog/media-query-units/ and again rather old so test your self https://codepen.io/b1mind/pen/poxyXrxCame across this too when looking into hacks on how to target safari specifically
@media screen and (-webkit-min-device-pixel-ratio:3)Just got back here with the answer.
@clevermissfox you're correct.
The answer
@media only screen
and (min-device-width: 360px)
and (max-device-width: 780px)
and (-webkit-device-pixel-ratio: 3) {
/* Styles for iPhone 12 Mini */
}
There's also an article on CSS-Tricks regarding this but they haven't updated the solutions yet for latest iPhone models.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Geoff Graham
CSS-Tricks
Media Queries for Standard Devices | CSS-Tricks
This page lists a ton of different devices and media queries that would specifically target that device. That's probably not generally a great practice, but it is helpful to know what the dimensions for all these devices are in a CSS context.
You're on the wrong thread mate
Can you please guide me on this error
Please make your own help post and review #how-to-ask-good-questions
Ok, this is the final solution.
For those who want to be specific for each iPhone device, you can use
device-width: and device-height:. It's also a good practice to include -webkit-device-pixel-ratio: if you're targeting the Safari browser.
Example below:
mmmm not sure device height is what you want here. That is going to differ between css pixels and device pixels? again never seen that one used.
Not saying its not a solution but I'm def curious 🤔
getting IE flashbacks with targeting this specific >_>
yea something seems very wrong about it 😄
On CodePen I did once use @media with set width and height on my profile CSS so that at a specific size everything except the follow button was hidden showing only the follow button. I then included an iframe displaying my profile at that size so that people could follow me from within the pen. I was told to stop and I think they blocked the follow button from working inside iframes
MDN Web Docs
Navigator: platform property - Web APIs | MDN
The platform property read-only property of the Navigator interface returns a string identifying the platform on which the user's browser is running.
MDN Web Docs
Navigator: userAgent property - Web APIs | MDN
The Navigator.userAgent read-only property returns the
user agent string for the current browser.
navigator.platform would tell me "iPhone" if using my iPhone, and "iPad" if using an iPad for instance