Media Queries - CSS Only for iPhone Landscape

Media Queries - CSS only for iPhone landscape

You could do this

<meta name="viewport" content="width=device-width, 
    minimum-scale=1.0, maximum-scale=1.0">

That forces the iPhone to render viewport the same as the device width.

Then use this css to target the landscape mode, which is +320px wide

@media screen and (min-width: 321px){
    //styles
}

3 media queries for iphone portrait, landscape and ipad portrait

Your own attempt modified

@media only screen and (max-width: 640px) and (orientation: portrait) {
    body { padding: 10px !important }
}

/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
    body { background: blue !important }
}

/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}

Media Query Only for Iphone 6

I know because before to come to this problem...

I trying to target an exact screen size with inexact units. Because I have not found an exact screen size for iPad 6, I will write the Media Query as I to see in Internet...

/* iPhone 6/7/8 , in CSS 667 x 375 (41.6875em x 23.4375em) Landscape */

@media only screen and (min-device-width: 23.4375em) 
               and (max-device-width: 41.6875em) 
               and (orientation: landscape) 
               and (-webkit-min-device-pixel-ratio: 2) {}

/* iPhone 6/7/8 , in CSS 375 x 667 (23.4375em x 41.6875em ) Portrait */

@media only screen and (min-device-width: 23.4375em) 
               and (max-device-width: 41.6875em) 
               and (orientation: portrait ) 
               and (-webkit-min-device-pixel-ratio: 2){ }

How to show now on search.google

All media queries for iPhone 13 (Pro, Max, Mini) and older iPhones

For iPhone 12 and 13

iPhone 13 mini

/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X

---

iPhone 13 and iPhone 13 Pro

/* 2532x1170 pixels at 460ppi */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13, iPhone 12 and iPhone 12 Pro

---

iPhone 13 Pro Max

/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13 Pro Max and iPhone 12 Pro Max

---

Older iPhones (X, Xs, XR and 11)

iPhone 11

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }

This media query is used for: iPhone 11 and iPhone XR

---

iPhone 11 Pro

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X

---

iPhone 11 Pro Max

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 11 Pro Max and iPhone Xs Max

---

Device orientation

Use the following code to add landscape or portrait orientation:

For portrait:

and (orientation: portrait) 

For landscape:

and (orientation: landscape) 

CSS media query to target only iOS devices

Yes, you can.

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

YMMV.

It works because only Safari Mobile implements -webkit-touch-callout: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout

Please note that @supports does not work in IE. IE will skip both of the above @support blocks above. To find out more see https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/. It is recommended to not use @supports not because of this.

What about Chrome or Firefox on iOS? The reality is these are just skins over the WebKit rendering engine. Hence the above works everywhere on iOS as long as iOS policy does not change. See 2.5.6 in App Store Review Guidelines.

Warning: iOS may remove support for this in any new iOS release in the coming years. You SHOULD try a bit harder to not need the above CSS. An earlier version of this answer used -webkit-overflow-scrolling but a new iOS version removed it. As a commenter pointed out, there are other options to choose from: Go to Supported CSS Properties and search for "Safari on iOS".

Media query not working in iPhone 5s landscape mode

Okay, I think it's working now. I've used a landscape-specific media query targeting my device screen size:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
  html {
    -webkit-text-size-adjust: none; /* none for no scaling */
  }
}

This was recommended here and here. All my other settings are being picked up now, too (because it wasn't just one rule--I was changing multiple elements in the media query).

(Thanks to those posters for their solutions. :)

---

Related Topics