After extensive research and testing, I have explored a variety of resources and solutions for implementing device-specific CSS on my webpage. Here are some of the references I've studied:
- 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 aim to customize my webpage's CSS files based on the user's device. Despite following many guides, I encountered issues, especially when testing on an HTC Desire where the output was inconsistent or incorrect. My current test code is referencing:
http://www.cloudfour.com/ipad-css/
Below is a snippet of my HTML file structure:
<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>
For example, I will only provide the iPad Landscape CSS file as they all follow a similar pattern:
div
{
display: none;
}
#ipadlandscape
{
display: inline;
}
I am seeking guidance on how to adjust the link elements to ensure that each device receives its designated stylesheet without any cross-referencing issues.