Как игнорировать ppi на мобильных девайсах?

Question

[Spaceoddity]

В общем есть страница свёрстанная под минимальное разрешение в 600пикс. Через медиа-запроса в CSS есть 2 варианта - больше и меньше 1200 пикс.
Но на этапе тестирования пошли какие-то непонятные глюки. Мобильные браузеры начинают отображать страницу в режиме масштабирования (грубо говоря берут за отсчёт не реальные, а "css-ные" пиксели), т.е. разрешение условного айфона становится 375х667. И это, конечно никуда не годится - в 375 пикселей ничерта не впишешь.
Я очень долго возился с мета-тэгом

Comments

[Froggyweb]

наверное meta тега нет.

Я очень долго возился с мета-тэгом

все просто

больше ничего не нужно

[EYPPNM]

Я очень долго возился с мета-тэгом

Какой метатэг, вьюпорт?

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

[Spaceoddity]

EYPPNM, ну да. И с ним, и без него, и жёстко width задавал...

[EYPPNM]

Spaceoddity, без кода вам никто никогда ничего скажет

[Spaceoddity]

EYPPNM, да там в коде ничего не разберёшь - вебпак склеивает, а исходники во Vue.
Нашёл костыль в виде "initial-scale=0.5".
Но вообще прям магия какая-то происходила. Страница загружается в мобильной версии нормально, перехожу в десктопную и обратно - расползается. Поставил width=600, чекаю веб-инспектором - у body ширина 600, у всех вложенных элементов 600 и меньше, а контент все равно не влезает во вьюпорт...

[EYPPNM]

Spaceoddity, ну етсь такое понятие как боксовая модель, в неё входит содержание, набивка (паддинги), рамки (бордеры), и внешние отступы (маргины) - чтото из этого может не даёт полностью влезть

https://www.w3schools.com/css/css_boxmodel.asp

в инспекторе крома боксовая модель изображена визуально, сделайте её скриншот, при наведении на боди, и поместите все вложенные элементы в контейнер и тоже сделайте скриншот цифр боксовый помдели попробуйте

может у вас гдето есть паддинги, версталы часто такое делают, чтобы вытеснять ею другие элементы на следующую строку

в любом случае вам надо выложить хотябы этот сайт кудато, чтобы ктото мог посмотреть код в инспекторе тоже

Answer 1

[monochromer]

Попробуйте так:

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

И убедитесь, что дочерние элементы не "вылазят" из своих контейнеров.