One of the techniques I'm using involves analyzing both the horizontal and vertical screen dimensions to differentiate between mobile devices and desktops, as well as distinguish high-resolution from low-resolution desktop displays.
In order to achieve this, I employ a snippet of JavaScript code that dynamically loads distinct CSS files based on these criteria. The script is structured as follows:
Javascript
<script>
if (screen.width > 800) {
if (screen.height < 900) {
document.write('<link href="/LowRes.css" type="text/css" />');
} else {
document.write('<link href="/HiRes.css" type="text/css" />');
}
} else {
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
document.write('<link href="/Mobile.css" type="text/css" />');
}
</script>
I've been contemplating transitioning away from this method and utilizing media queries instead. Here's what my proposed implementation looks like:
CSS
<link media="screen and (min-device-width: 801px) and (min-device-width: 801px)" href="low.css" rel="stylesheet" />
<link media="screen and (min-device-height: 901px)" href="hi.css" rel="stylesheet" />
<link media="screen and (max-device-width: 800px) and (orientation : portrait), screen and (max-device-height: 800px) and (orientation : landscape)" href="mobile.css" rel="stylesheet" />
This adjustment ensures that the mobile stylesheets are universally accessible regardless of orientation. However, it still poses an issue with desktop layouts being classified as high resolution even when they're actually low resolution.
https://i.sstatic.net/1SpdH.jpg
Upon examining the screenshot provided, you can observe that despite setting the height threshold at 800px for desktop view, the defined media query dictates min-device-height:901px yet proceeds to load the high-res stylesheet. This discrepancy raises the question of why this behavior persists.