Why is the screen size in the browser different from the real one?

Asked

Viewed 713 times

2

I’m terrible when it comes to HTML design + CSS, but as a web programmer, I often find myself having to do it.

Often I have to do such things media-query to adjust the layout.

Question

  • If I have a phone with 360x592 resolution, because at the time of mounting the media-query and resolution is 980x1413?
  • What is the relationship to this difference?
css media-queries screen-resolution

  • Do you have any code that shows this in practice? There seems to be something incorrect...

  • if you press F12 on google Chrome, it will open dev tools, press CTRL+SHIFT+M to open device mode. test at will

2 answers

0

This happens because of the pixel ratio of your device. you are probably testing on a mobile phone with pixel ratio 3, so while the screen is 360x592, pixels will behave as 980x1413

In practice, for screen construction purposes, there are 360x592 pixels. But each of these pixels represents 3x3 pixels on the physical device. This happens in very high resolution devices such as Galaxy S4, HTC DROID DNA, etc. These pixels are used for visual enhancements, but are not available to the developer, as a real 1 pixel line would be so thin that it would not be visible.

More in http://sergiolopes.org/resolucoes-dpi-pixel-ratio-retina/

  • Very interesting link, could explain a little in your reply?

0


William, surely your problem is caused by pixel ratio, it changes the view of pixels depending on the device, here’s a great tip for you: https://css-tricks.com/snippets/css/retina-display-media-query/

Therefore, not only for mobile devices, but for desktop it is important to note that Chrome does a different analysis of Firefox for screen size on different operating systems, such as in Línux, where the Ubuntu sidebar is taken into account by Chrome, but not by Fox!

Complimentary: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

  • Could you explain a little how this resource works? and why this occurs?

  • Researching what commented, I found this link if you want to supplement the answer.

  • Good William, that’s exactly what I was going to explain to you, the use of viewport, Scale and content, but by the link you thought is already a good idea of how to fix this, I think

Browser other questions tagged css media-queries screen-resolution

You are not signed in. Login or sign up in order to post.