0

I've been working with CSS for a while, but now I got confused. I have a responsive ready (at least that's what I thought) app.

Galaxy S8 (resolution 1440x2960) Everything OK (big and readable text);
Nexus 7 (resolution 1200x1920): Everything BAD (small and barely readable text);
Oneplus 3 (resolution 1080x1920): Everything OK;

Based on my CSS code I assume it should work correctly up to 800px width. Above that why does it work with 1080px width and 1440 width and NOT with 1200 width which is basically between? The same thing is happening with my bootstrap icons, they got very small on 1200 width, my contact form is also only on 1/3 (on height) of the screen in this case (it should be on 2/3 on height). Am I that much on the wrong path?

Here is an example of my code:

@media screen and (max-width: 800px){body{font-size:17px}}
@media screen and (max-width: 720px){body{font-size:16px}}
Stefan
  • 192
  • 1
  • 11

1 Answers1

1

You have to take pixel ratio also into account, a factor by which you have to divide the device resolution to get to the actual resolution the browsers are using to render a website.

The Nexus 7 has a pixel ratio of 1.325, this means that 1200 actual pixels are rendered as 1200/1.325=905px wide in a browser, for which none of the media queries you indicate is used.

Although I can't find the pixel ratios for Samsung S8 or Oneplus, based on Samsung s7's pixel ratio of 4, the 1440 pixels render as 1440/4=360px in the browser, so the bottom media query you indicate is used.

If you own the devices mentioned, visit the following link to determine the pixel ratio of these devices and what is the rendered resolution: https://www.mydevice.io/

You can find sample of pixel ratios at this link: https://mydevice.io/devices/

More information concerning pixel ratio: what exactly is device pixel ratio?

scooterlord
  • 15,124
  • 11
  • 49
  • 68