Search code examples
cssmedia-queriespixel-ratio

do u have to use device pixel ratio in media query?


I just have to clarify an issue regarding device-pixel-ratio, do I have to use it in my media queries? will it somehow affect them if i don't? I mean, there are many devices using the 360X640 screen resolution, for example:

Samsung Galaxy S6 (360X640 , 4dpr) Sony Xperia Z (360X640 , 3dpr) Samsung Galaxy Note II (360X640 , 2dpr)

So if i just make 2 media queries for portatrait and landscape, like so:

<link rel="stylesheet" media="only screen and (device-width : 360px) and (device-height : 640px) and (orientation : portrait)" href="style360.css"/> 
<link rel="stylesheet" media="only screen and (device-width : 640px) and (device-height : 360px) and (orientation : landscape)" href="style640.css"/> 

Will it somehow differ from doing this:

<link rel="stylesheet" media="only screen and (device-width : 360px) and (device-height : 640px) and (-webkit-device-pixel-ratio: 2) and (orientation : portrait)" href="style360.css"/> 
<link rel="stylesheet" media="only screen and (device-width : 640px) and (device-height : 360px) and (-webkit-device-pixel-ratio: 2) and (orientation : landscape)" href="style640.css"/>
<link rel="stylesheet" media="only screen and (device-width : 360px) and (device-height : 640px) and (-webkit-device-pixel-ratio: 3) and (orientation : portrait)" href="style360.css"/> 
<link rel="stylesheet" media="only screen and (device-width : 640px) and (device-height : 360px) and (-webkit-device-pixel-ratio: 3) and (orientation : landscape)" href="style640.css"/>
<link rel="stylesheet" media="only screen and (device-width : 360px) and (device-height : 640px) and (-webkit-device-pixel-ratio: 4) and (orientation : portrait)" href="style360.css"/> 
<link rel="stylesheet" media="only screen and (device-width : 640px) and (device-height : 360px) and (-webkit-device-pixel-ratio: 4) and (orientation : landscape)" href="style640.css"/>

Its just that every tutorial or explanation about media queries i found on the web included the device-pixel-ratio in the query, I tried to look for information on the web to see if it is a must, and couldn't find anything.


Solution

  • To answer your first question, no, you do not have to use device pixel ratio in media queries.

    For the second question, the two sets of link tags are not equivalent, because the second set does not account for of pixel ratios equal to 1 or greater than 4. The first set of link tags is probably what you should be using.