82

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Hossain Khan
  • 6,332
  • 7
  • 41
  • 55

9 Answers9

159

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:

starball
  • 20,030
  • 7
  • 43
  • 238
Hossain Khan
  • 6,332
  • 7
  • 41
  • 55
  • 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 '13 at 03: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 '13 at 07: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. – Hossain Khan Dec 13 '13 at 12:06
  • 1
    Isn't the device-width: 1024px when you are in landscape? – Mike Garcia Jul 22 '14 at 09:26
  • 2
    No, as far as I know, these dimension info is fixed for the device. For orientation you already have `orientation` selector. – Hossain Khan Oct 11 '14 at 00:04
  • Great answer, but why do you change the style name from ipad-portrait to ipad-landscape? Wouldn't you want the same style name so that your HTML can be agnostic with respect to orientation? – Danger Jan 07 '15 at 23:47
  • @Danger - you are correct, the class name should have been same to apply different style definition on different orientation. The example was selector related, so I believe it worked well for most people. – Hossain Khan Jan 09 '15 at 09:13
  • Just FYI, anyone who is specifically trying to *only* target iPads should be aware that this has the potential to work on other devices. This will, however, be very helpful to fix CSS layout issues appearing on screens with these exact specifications (iPads included). @MikeGarcia No. The orientation does not change/swap device-related properties. – Alex W Jun 24 '15 at 17:44
  • Any one has iPad 1(non-retinal) specific resolutions? Having a lot of layout trouble with iPad 1. – JSNoob Oct 17 '17 at 15:49
  • How is this iPad-specific ? If I have a mobile device with the same resolution/width/height, it will be wrongly targeted, too... – Stefan Steiger Nov 22 '17 at 08:30
13

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
   }
Shairyar
  • 3,268
  • 7
  • 46
  • 86
  • 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 06 '16 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
Beatriz Oliveira
  • 659
  • 3
  • 5
  • 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 '14 at 08: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 '14 at 01: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 '15 at 17:42
  • 1
    No one should to this when a media query will do the job. Most definitely not the best answer. – jarrodwhitley Jan 29 '20 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

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>
Daniel Raja Singh
  • 505
  • 5
  • 12
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.

kevinius
  • 4,232
  • 7
  • 48
  • 79
  • 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 '22 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.
vaibhavi purohit
  • 71
  • 2
  • 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 '22 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){
  
}
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
ANOOP NAYAK
  • 473
  • 5
  • 8
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 */
}
Steve
  • 2,066
  • 13
  • 60
  • 115