Best IT Recipes

Discovering various device platforms with CSS

I would like to say that I read and tried many options for instructions here:

I would like my page to use different CSS files depending on the device used. I saw a lot of solutions for this, everyone uses one form or another of the above.

However, when testing on HTC Desire, I consistently get either the output intended for the iPad, or completely unfiltered output. My test code is currently 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 iPad landscape file (I will only point out that here, since they are all basically the same:

 div { display: none; } #ipadlandscape { display: inline; }

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

+14
css platform-detection mobile-devices
Nov 07 2018-11-11T00:
source share
1 answer

Well, after some (much more) games and adding some javascript, I have a solution - the droid device did not use the resolution that I counted:

 <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>
+23
Nov 07 2018-11-11T00:
source share


More articles:


All Articles