It is necessary to display in the browser of a mobile device (for full accuracy - in Google Chrome browser on Android or similar) the site as it is, without zoom, exactly under the width of the screen.

In the example below, a meta tag is used:

<meta name="viewport" content="width=device-width, initial-scale=1">

Here is how the site looks in the desktop browser - the width of the side menu is exactly 40px, nothing is blurry, just as it is written in CSS

In the desktop browser

But the same site in the browser on the tablet - here the width is already 52px, which is why I conclude that the pixel size is set slightly larger, presumably under the device's DPI, so that all elements are the same size (for example, in centimeters) on all mobile devices .

In a mobile browser

But at the same time, stitches between elements and blurred edges come, which personally upsets me a little, since I haven’t yet found a meta tag in HTML or a magic property in CSS (I didn’t take pixel dimensions in Javascript, it would suddenly turn out to be a bicycle).

Tell me, is there any way to show a point-to-point site in a mobile browser (for example, so that the width of the menu itself is exactly 40px)?

    3 answers 3

    If the matter is pixel density, then you can specify the size for screens with high pixel density:

     @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .class { .. } }

      google chrome Toggle device mode (mobile icon)

      in recent versions works very well

      enter image description here

      there is also a very good way for mac os. IOS simulator in conjunction with dev tools safary,

      enter image description here

      But chrome and android devices look, and the interface is more pleasant in my opinion

        As shown, the blurring is due to images with low resolution.

        And here about the seams, only inline blocks that come after the closing tag and the opening tag of the next block come to mind is a new line.