Как разместить контент в видимой области увеличенного мобильного браузера? ⇐ Html

[Anonymous]

Есть ли простой способ разместить HTML-содержимое в видимой части браузера экрана телефона при увеличении? Ограничения:

• Подходит для визуальной области просмотра (не области просмотра макета).
• Подходит по ширине (вертикальная прокрутка допустима, горизонтальная прокрутка не требуется для просмотра всего содержимого).
• Только HTML и CSS (без JavaScript).
• В браузерах мобильных (телефонов)
• При увеличении масштаба (сведением пальцев)

При масштабировании щипком содержимое должно увеличиваться и меняться по мере необходимости, чтобы оставаться в пределах видимого из стороны в сторону экрана; то есть соответствовать тому, как настольные браузеры естественным образом соответствуют ширине дисплея: блокировать элементы в окне.
При масштабировании мобильные браузеры вместо этого требуют горизонтального панорамирования, чтобы увидеть весь контент, поскольку они помещают его в воображаемую область, большую, чем фактический экран, «окно просмотра макета». 100vw и ширина: 100%; позиция: фиксированная не дает желаемого эффекта, поскольку они соответствуют области просмотра макета. (По крайней мере, в 2025 году старые браузеры могли вести себя иначе.)
Пример:




p { border: thick solid black; }

/*
Add styling to make the tag fill the screen width at all zoom levels on
iPhone and Android browsers. Changing HTML and CSS is ok, adding JS is not.
*/




This box should expand and contract with zoom so that it fills the screen
from side to side and both sides are always visible.




Подробнее здесь: https://stackoverflow.com/questions/797 ... le-browser