15

I'd like to say that I have read and tried many variations of the instructions here:

I would like to have my page use different CSS files depending on the device being used. I have seen many solutions to this, all using some form of the above.

However, when testing on an HTC Desire I consistently get either the output intended for iPad or a completely unfiltered output. Currently, my test code is based on:

http://www.cloudfour.com/ipad-css/

Here is my HTML file:

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

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-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: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />

    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:portrait)" href="htcdesire-portrait.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>
</body>
</html>

And here is the iPad's Landscape CSS file (I'll only provide that here as they are all basically the same:

div
{
    display: none;
}

#ipadlandscape
{
    display: inline;
}

I would like to know what modifications to make to the link elements to ensure that the ipad gets only its stylesheets, the iphone gets its own and (in this case) the htc desire (or same resolution/aspect devices) get that stylesheet.

1 Answer 1

28

Well, after some (much more) playing around and the addition of some javascript, I've got the solution - the droid device was not using the resolution I believed it was:

<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>
4
  • You are a life saver... have been looking for media query to target iPad. Your example works perfectly! Thanks! Feb 29, 2012 at 17:27
  • 1
    Please note that device-width and device-height instructions work only when the screen size exactly matches given numbers. Please note this code won't apply for other devices with similar size, so the site will look completely un-adapted to them! If you want to support all other devices (also manufactured in future), you should include a code for them that uses min- and max- prefixes.
    – Dan
    Jan 2, 2013 at 1:03
  • I know this is a bit old, but I tried this and was successful, except it gives me screen dimensions in the top left. Does the code need to be changed?
    – jwknz
    May 20, 2013 at 1:00
  • 1
    New Android devices like the Galaxy s4 and Nexus 4 now pass the check for the iPad since they have 1024 x 768 displays.
    – Gyurme
    Jun 18, 2013 at 22:16

Your Answer

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

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