Menu
Does anyone know a good modern CSS hack to target only mobile safari on iPhone and iPod Touch?
I keep seeing @media screen and (max-device-width: 480px), but that's from 3 years ago and matches Nexus S among others now.
(This is to fix a subtle layout issue. I realise browser sniffing is evil etc.)
438
As a commenter pointed out, there are other options to choose from: Go to Supported CSS Properties and search for "Safari on iOS". Show activity on this post. As mentioned above, the short answer is no.
Not me. Apple is using the CSS standards as intended; perhaps you should read their blog post before you decide it’s a hack: Designing Websites for iPhone X. Here’s the code:
Apple is using the CSS standards as intended; perhaps you should read their blog post before you decide it’s a hack: Designing Websites for iPhone X. Here’s the code: @supports(padding: max(0px)) { .post { padding-left: max(12px, constant(safe-area-inset-left)); padding-right: max(12px, constant(safe-area-inset-right)); } }
Since Safari is the only browser than can run natively on iOS, other mobile browsers are a none-issue. Firefox and Chrome for iOS use WebKit under the hood, so they already support the new stuff. I suspect Chrome for Android will add support if or when Google ships a device that could benefit from them. Steve Tegtmejer
http://cssuseragent.org and welcome to the Dark Side.
183
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
