Какую ширину воспринимает тег?

Question

[Евгений]

Делаю адаптивку и в ступор стал.

Для нормальной адаптивки нужен тег

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

Но какую ширину экрана он берёт? Ширину браузера или ширину девайса. Они уж ОЧЕНЬ отличаются

Comments

[tyzberd]

375 * 579

[tyzberd]

https://developer.mozilla.org/ru/docs/Mozilla/Mobi...

Answer 1

[Вадим Белкин]

Если фактическая ширина экрана в пикселях у вас 1125 и Device Pixel Ratio = 3, то делите фактическую ширину на ratio и получите ширину которую будет браузер как бы эмулировать.
Т.е. если вы используете указанный метатег и добавите на страницу два блока с фиксированными ширинами , один 1125, а второй 375, то первый блок выйдет за границы экрана и появится горизонтальный скролл, а второй блок будет ровно по ширине экрана

Comments

[Евгений]

Т е нужно делать адаптивку под ширину браузера получается. Печально, так как она гораздо меньше разрешения экрана

[Вадим Белкин]

А почему печально? Уберите метатег и увидите как будет по фактическому разрешению экрана вашего устройства. Там же пиксели в разы меньше чем у десктопных fullHD экранов и все будет нечитаемо мелким, придется использовать зум чтобы увеличить содержимое для возможности прочитать.

Answer 2

[leni_m]

в гугле вбиваем meta name="viewport"