Css Media Query to Target Only iOS Devices

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".

iOS specific media queries

Media queries can only infer a few media features, and are designed to serve different content based on features, not brand or model.

Probably best you could do is to target the exact device-width for each device listed: someone here has already provided, as an indication, how to specifically match the iPad's dimensions.

The problem is that out of the huge range of devices out there, some feature the same dimensions (and the webkit browser — which can be inferred via hacks). All in all, CSS is even worse than JS at determining esoteric brand or OS features of the device in question.

Media query to target iphone/mobile/ipad

Try with below media query and meta tag

/* For mobile : like samsung grand(480 * 800): */
@media screen and (max-width : 480px){}


/* For iphone: */
@media screen and (max-width : 320px){} 


/* For ipad: */
@media screen and (max-width : 768px){} 

Additionally. change your meta tag:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

CSS media query to target iPad and iPad only?

Finally found a solution from : Detect different device platforms using CSS

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

To reduce HTTP call, this can also be used inside you existing common CSS file:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

Hope this helps.

Other references:

• https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

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 does not target specific device iPhone 7 plus

I found a fix!! It only targeted iPhone 7 plus landscape mode and not portrait mode!!

   .box {
      height: 30vh;
      width: 20vw;
      background-color: coral;
    }

        /* iPhone 7+ Landscape */
                @media only screen
                    and (min-device-width: 414px)
                    and (max-device-width: 736px)
                    and (-webkit-min-device-pixel-ratio: 3)
                    and (orientation: landscape)
                    and (min-aspect-ratio: 16/9)
            {  
              .box {
                background-color: blue; 
              }
            }

<!-- HTML -->
    <main><div class="box"></div></main>

Working demo here: plz test on iPhone 7 plus

iPhone XR / XS / XS Max CSS media queries

iPhone XR

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

---

iPhone XS

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

---

iPhone XS Max

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

---

Looking for a specific orientation ?

Portrait

Add the following rule:

    and (orientation : portrait) 

Landscape

Add the following rule:

    and (orientation : landscape) 

References:

• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
• https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

---

Related Topics