I noticed that something strange was going on with the screen sizes on the phones. I decided to check it - I created 3 blocks of 1080px width, 967px (picked up for my screen) and 900px. I open the page on the phone Redmi Note 5, whose screen is 2160 x 1080 and I see that the block in 1080px crawls out of the screen, and 967px fits just right.

enter image description here

Further more interesting! If you turn the phone horizontally, the block in 1080px should occupy exactly half of the screen, but instead, it again gets out of the screen!

enter image description here

Is there something wrong with the phone or I misunderstand the dimensions in css? If you open this page in chrome through the developer tool on Pixel2 with a resolution of 411 x 731, then the story repeats.

Why it happens?

enter image description here

  • Meta viewport prescribed for the browser to use the width of the screen? - andreymal
  • @andreymal, did not register anything. I created an application for a reactor, connected a storybook, and made such blocks in it - Farad
  • one
    So write to developer.mozilla.org/ru/docs/Mozilla/Mobile/Viewport_meta_tag - andreymal 8:49 pm

0