Geek asks and answers

Mobile Safari on iPhone / iPod CSS hack

Does anyone know a nice modern CSS hack designed only for mobile safaris on iPhone and iPod Touch?

I keep seeing @media screen and (max-device-width: 480px), but this is from 3 years ago and now matches the Nexus S among others.

(This is a fix for the subtle layout issue. I understand that sniffing the browser is evil, etc.)

+5
source share
5 answers

http://cssuseragent.org and welcome to the Dark Side.

+8
source

you can use only screen and (-webkit-min-device-pixel-ratio: 2)

+3
source

-webkit-min-device-pixel-ratio: 2. , , 2- ( , min-ratio), iPhone 3GS Retina iPod Touch. .

+1

- . Apple . iphone "iphone", ipod "ipod". css.

0

Safari , - :

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

.safari_only , , :

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>

: Safari Android, ... , Safari Android:)

0

More articles:


All Articles