I put together the following code that was the same on several CSS
instructional sites. This test should show "1 & 2" when viewed on iPad 1 or
2, and show "3 & 4" when viewed on iPad 3 or 4. Not working; shows 1 & 2 on
iPad 3. I tried code verification thinking there was a typo, but it
approved everything except the webkit reference, which I expected.
- Keith
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css to detect screen resolution</title>
<style type="text/css">
html {margin:0; padding:0;}
body {margin:10px; padding:0;}
/* ipad 1 and 2 */
@media only screen and (min-device-width: 768px) and (max-device-width:
1024px)
{body {background-color:#3C3;}
}
/* ipad 3 and 4 */
@media only screen and (min-device-width: 1536px) and
(max-device-width:
2048px) and (-webkit-min-device-pixel-ratio: 2)
{body {background-color:#33F;}
}
</style>
</head>
<body>
<body><span
style="color:#33F;font-weight:bold;font-size:4em;"> 1 & 2
</span> <span
style="color:#3C3;font-weight:bold;font-size:4em;">3 & 4</span
></body>
</html>
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
