CSS media queries, pixel density, desktop and mobile devices

Question

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.

Answer 1

Add this to your head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).