So with media query we can dictate how the site will look on different screens. That’s simple enough until I ran into this particular problem where smaller devices have higher resolutions. For example, sometime ago I designed a simple site with 3 media queries: tablets and mobiles (<= 1280px), laptop screen (1280px to 1920px) and large screen (up and above >=1920px. I realized when this site was viewed in a small macbook whose digital resolution was almost double of 1920px, it showed the site in 1280px styles. I guessed it was because the device screen was so small. Why this happens and how to get around this?
I have had this problem before, and it’s pretty hard to deal with because even with resolutions you don’t know (i) how many physical pixels there are vs. what the device pretends and (ii) how far from the screen the viewer is (e.g. are they are watching a TV or 2" from their phone screen and (iii) the DPI density of the pixels.
I just relax and give up on the whole thing! Use the media queries you suggested with “rem” font-sizes and call it a day. Because as long as the fonts are readable, if it uses the wrong layout it doesn’t matter too much (I mean sometimes I get mobile layouts show on my desktop, I don’t care too much as long as it’s usable). The trick is to make sure you site is pretty usable in all formats.
1 Like