Situation :
I have 5 CSS files:
base.css with some styles that apply everywhere
339px.css for widths up to 339px
639px.css for widths up to 639px
999px.css and
bigscreen.css for anything above 999px width
Code :
<link rel="stylesheet" type="text/css" media="all" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 339px)" href="css/339px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 340px) and (max-width: 639px)" href="css/639px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 640px) and (max-width: 999px)" href="css/999px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="css/bigscreen.css" />
This is all well and good and performs perfectly on any device where 1 css pixel equals 1/96 inch (2.54cm) on the device screen. Recently, however, many display devices have pixel densities much higher than this, so they apply, say, the 639px.css when the 339px.css would be appropriate. This is a problem, as the contents look way too small.
Also note that I cannot use JavaScript and desktop computers schould always get the corresponding css file according to width, regardless of orientation.
What I am looking to achieve:
- 339px.css for any device with:
- a width <=339px
- a high resolution but a small screen (for instance my android smartphone with 1280x720 but a 5.7" screen) and in portrait orientation.
Bascially instead of css pixel, I'd want a unit that is relative to the pixel density of the device (Desktop, tablet, smartphone, 4k displays, "Retina" displays, you get the idea) and works with all major browsers on both mobile and desktop platforms.
At the same time, I also need a fallback to css pixels for older browsers.
It has given me a major headache to achive this. As far as I understand, you could use the device-pixel-ratio, but I have not succeeded in not making the css files "overlap" at some point (an area where two css files are active, for instance 339px.css and 639px.css).
I am at my wits end. I have tried a combination of min-width, max-width, device-pixel-ratio, orientation: portrait/landscape media query, but this failed due to the fact that desktops should ignore the orientation. So far I couldn't get a positive result across devices, even if I disregarded the browser support requirement.
