0

I started to learn HTML/PHP and now I am at the chapter responsive webdesign.

With the media query the output can be adapted to desktop and mobile devices. For example with "media="screen and (max-width: 640px)". So far, so good. The resolutions of smartphones are often higher or just as high as those of desktop monitors. As you can see here

https://screensiz.es/phone ... eg. Apple iPhone 7 Plus - 1080 x 1920

My question now is, why a media query for example with 640px, if the resolution of smartphones is anyway as high as that of desktop monitors?

3r1c
  • 376
  • 5
  • 20
WalterA
  • 33
  • 4
  • 1
    Even though a phone has a high resolution display doesn't mean the browser is using that resolution to display the page. Browsers on smart phones use something like Device Pixel Ratio which scales the display so 1080x1920 might end up being displayed as 360x640 at a DPR of 3 for example. You wouldn't expect to be able to see all the detail of a desktop monitor even on a device that may have a 6 inch display without straining your eyes! – phuzi Jan 04 '23 at 15:55
  • See [this question](https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio) for more info regarding DPR – phuzi Jan 04 '23 at 15:58

0 Answers0