CODEWITHSUNDEEP
cssmedia-queries
Michel
Michel

Reputation: 23645

Media query to detect a small (in inch) but high-width (in pixels) screen

I've done a little work on my site to show smaller screens (in pixels) another navigation (bigger) than the larger screens. Now this works on my desktop when resizing the browser window, but there are of course also mobile phones which have the same number of pixels as my desktop machine, but then in a very small screen (let's say 5 inches).

So what I want to do is: show the 'desktop' css not only when you have lots of pixels, but also when your screen is say 10 inch or larger. Can I accomplish that with media queries?

This is what i have now:

<link rel="stylesheet" href="/styles/style-mobile.css" media="only screen and (max-width: 840px)" >
<link rel="stylesheet" href="/styles/style-desktop.css" media="screen and (min-width: 841px)">
<link rel="stylesheet" href="/styles/style-desktop.css" media="print">

Upvotes: 2

Views: 6115

Answers (2)

Marian Kmet
Marian Kmet

Reputation: 63

Add device-pixel-ratio and resolution to your media queries. To maximize cross-browser compatibility you should use something like this:

 @media (-webkit-min-device-pixel-ratio: 2),   /* Webkit-based browsers */
        (min--moz-device-pixel-ratio: 2),      /* Older Firefox browsers (prior to Firefox 16) */
        (min-resolution: 2dppx),               /* The standard way */
        (min-resolution: 192dpi) {             /* dppx fallback */  
         ...
      }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Pixel ratio values for different devices can be found here: http://bjango.com/articles/min-device-pixel-ratio/

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46629

Use resolution in your media query to distinguish between devices of different pixel densities.

For instance to tend to a 288 dpi device where one logical pixel is three hardware pixels, use one of these

@media screen and (min-resolution: 3dppx) { ... }
@media screen and (min-resolution: 288dpi) { ... }

where dppx means dots per pixel, and dpi, of course, dots per inch.

See W3C or MDN.

Upvotes: 1

Related Questions