15
I'd like to say that I have read and tried many variations of the instructions here:
- http://www.cloudfour.com/ipad-css/
- Detect iPhone/iPad purely by css
- Detect Xoom browser (Android)
- http://www.w3.org/TR/css3-mediaqueries/
- http://www.w3schools.com/html5/att_link_media.asp
- http://en.wikipedia.org/wiki/List_of_Android_devices
- http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg
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 (ori