Suppose there is a DIV block 100 * 100px.
In the browser on your computer, the block is displayed normally, on a scale of 100%.
In a browser on a mobile device, the DIV looks smaller, as the number of pixels per inch is higher.

How to solve the problem of displaying blocks in different sizes from a visual point of view, so that they are the same on both the computer and the smartphone?

    2 answers 2

    In the head write the following:

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

    And pixels per inch nothing to do with. If you use JS to check the size of the viewport, it will be less than the actual number of pixels in your device.

    • This meta tag is registered. It allows the design to adapt. But he does not relieve the above problem. - Frontender
    • @ Viktor Pavlov strange troubles. Well, less he is sensitive and what? Elements relative to each other will be exactly the same as on the computer. - inferusvv
    • Perhaps you are right, but perfectionism does not give me peace. - Frontender
    • Although no, I found a solution. Through media queries. - Frontender

    @media to help

    • funny link turned out :) - MasterAlex