media query... query!

[MotorIB]

I've never come across this before, but I have received some code from another developer who has media queries in place such as max-width:1199.98px and the next break-point is 1200px; so there's a difference between the two of .01px!

Why .98px and not .99px? Is this a retina thing?

Should I just change them to .99px?

TIA

[BenPleysier]

Decimals for pixels are ignored and the whole number will be rounded off.

In other words, do not use decimal places for the px unit.

[pziecina]

Hi Ben,

There is now, (once again) some debate over using decimals in px values.

With many 4x+ devices now being widely used, none of the device/screen manufacurers are saying, (or perhaps even know) what happens if decimals are used. It is possible with a 4x screen that a 0.25px, (or multiples of) pixel mesurement would 'display' 1px, (it gets even worse, when 8x screens are used). Also don't ask what difference the device pixel ratio does anymore.

The debate started with Apples anouncment regarding the iPad OS last year, (the statement that it would display desktop layouts by default) and how it would know which media-query was for desktop?

[BenPleysier]

Thank you Paula for the explanation. Poor me with my humble setup, have no idea of what happens in ultra high definition screens.

Reading https://www.w3.org/TR/css-values-3/#viewport-relative-lengths

For screen media (including high-resolution devices), low-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

To me this reads that for 4K devices, 1 px refers to 16 device pixels. This view comes from a pixel ignoramus (me).

I'll  gladly follow your advice.

[pziecina]

Don't worry Ben, if you are as confused as me on the subject, then welcome to the 'confusion reigns' group.

The question that I could not answer, (and no one else has satisfactorily to my knowledge) was that if px values are displayed in browsers as 1px = 16 device pixels, (4k screen) then how does srcset, (using the 'w' descriptor) or the px size for images work, as they are displayed at 1px = 1px?

The problem is becomming worse, with 30 inch+ 4k screens being used not just by smart tv's, but as desktop monitors.

(makes me glad I retired).

[pziecina]

Forgot to add Ben,

For anyone thinking that srcset is just a 'gimmick'. Try viewing your site on a 30 inch+ 4k screen, then remember that 4k game consoles have browsers, and 1 in 5 users of them do use the built in browsers, (1 in 5-8 (estimated) for smart tv's).