84

Hi I am working with multiple tablet devices, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad and so on.

  • iPad - 1024 x 768
  • LG Pad - 1280 x 768
  • Galaxy Tab - 1280 x 800

I want to target iPad only using CSS3 media query. Since, device width of LG and iPad is same 768px - I am having trouble separating each device.

I have tried following to separate, but does not seem to be working:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */

I don't know the -webkit-device-pixel-ratio and other -webkit* options and their values to target for iPad. I don't want to use JavaScript for styles, any ideas?

1
  • device-aspect-ratio will work on iPad, but the correct value to use is 768/1024 Nov 26, 2012 at 2:00

9 Answers 9

161

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 */
}

Other references:

10
  • Just in case you were wondering, this will switch the styles if the device is rotated without having to resort to using Javascript.
    – Dave Sag
    Apr 17, 2013 at 3:59
  • 1
    All iPads have the same resolution? I thought there were 3 resolutions for different versions. And I guess it is impossible to predict if more resolutions will come out.
    – Dan
    Dec 12, 2013 at 7:07
  • Back in the days, when I was working on it, there was no iPad Mini. So, I don't know what the screen resolution it reports as. But, this CSS Media Query worked for retina iPad. So, it's better to test on actual devices to be more sure. Dec 13, 2013 at 12:06
  • 1
    Isn't the device-width: 1024px when you are in landscape? Jul 22, 2014 at 9:26
  • 2
    No, as far as I know, these dimension info is fixed for the device. For orientation you already have orientation selector. Oct 11, 2014 at 0:04
17

I am a bit late to answer this but none of the above worked for me.

This is what worked for me

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //your styles here
   }
1
  • Thank you, but when changing between landscape and portrait mode it got messy for me. So I had to add and (orientation:portrait) and and (orientation:landscape) so that the css wouldn't clash. So for anyone who did not understood what I meant, the total media query looked like this for portrait: @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { //style }
    – Coco
    Jul 6, 2016 at 21:35
6

You need to target the device by its User Agent, using some script. The user agent for the iPad is:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
4
  • Detecting on the server has some benefits. Once detected on the server, I would add a class to the body of the response as to assist in the CSS selection.
    – Oren
    Apr 10, 2014 at 8:06
  • 1
    This is the best answer. Detection of specific third-party devices based on exact screen pixel resolution and orientation is not future-proof and not in the purpose of CSS. Server-side user agent bridges are never a good solution being discriminative, so this one should be on top.
    – filip
    Jun 11, 2014 at 1:46
  • 1
    @FilipDalüge This is nowhere close to the best answer. As long as you're using media queries to fix CSS spacing problems, it doesn't matter if it's future proof or if it fires on other devices with the exact same screen size. The above answer targets an exact version of Mobile Safari which is basically useless, as it won't even handle all iPad devices in a single generation.
    – Alex W
    Jun 24, 2015 at 17:42
  • 1
    No one should to this when a media query will do the job. Most definitely not the best answer. Jan 29, 2020 at 18:25
4

Well quite same question and there is also an answer =)

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

@media only screen and (device-width: 768px) ...
@media only screen and (max-device-width: 1024px) ...

I can not test it currently so please test it =)

Also found some more:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Or you check the navigator with some javascript and generate / add a css file with javascript

0
2
<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.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" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>
1

These days you can use a Media Queries Level 4 feature to check if the device has the ability to 'hover' over elements.

@media (hover: hover) { ... }

Since the ipad has no 'hover' state you can effectively target touch devices like the ipad.

1
  • Aren't most mobile devices void of the ability to hover? I'm not sure how this helps identify iPad specifically as asked within the question.
    – Bonez024
    Aug 17, 2022 at 18:37
1
/*working only in ipad portrait device*/
@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) {
  body{
    background: red !important;
  }  
}
/*working only in ipad landscape device*/
@media all and (width: 1024px) and (height: 768px) and (orientation:landscape){
  body{
    background: green !important;
  }   
}

In the media query of specific devices, please use '!important' keyword to override the default CSS. Otherwise that does not change your webpage view on that particular devices.
1
  • I think your implementation is better than others here... but I disagree with the notion of using !important. Typically this is indicative of a poor css structure. The media queries should work just fine if identified for the scenario you're after.
    – Bonez024
    Aug 17, 2022 at 18:40
1

this is for ipad

@media all and (device-width: 768px) {
  
}

this is for ipad pro

@media all and (device-width: 1024px){
  
}
0
0

CSS to target iPad 9th & iPad 10th:

/* iPad 9th Gen */
@media only screen 
    and (min-device-width: 810px) 
    and (max-device-width: 1080px)
    and (min-device-pixel-ratio: 2) {
        /* rules here */
    }

/* iPad 10th Gen */
@media only screen 
    and (min-device-pixel-ratio: 2) {
        /* rules here */
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.