Отображение страницы на мобильном устройстве?

Question

[Михаил Р.]

Создал тестовую страницу с минимальной шириной в 800px, далее проверяем на мобильном устройстве:

1. Если страница короткая - то вертикальный скролл не появляется и в общем страница отображается оптимально.
2. Если страница длинная - то появляется вертикальный скролл, т.к. скролл имеет свою ширину, то ширина общей страницы становится больше 800px и из-за этого появляется горизонтальный скролл.

Вопрос: как добиться отображение на длинной странице аналогично короткой, как в данном случае решается вопрос со скроллом?

Короткая страница без вертикального скролла:
Демонстрация на iPhone...
Код на codepen.io...

Длинная страница с вертикальным скроллом:
Демонстрация на iPhone...
Код на codepen.io...

Answer 1

[tyzberd]

вы не тестируйте через разные непонятные сервисы, на реальном мобильном, или даже через chrome devtools скрол появляется только во время скролла и не влияет на ширину

Comments

[tyzberd]

ctrl + shift + M в хроме

[Михаил Р.]

tyzberd конечно я проверял на живом iphone, на протяжение сотни проверок в разных моментах этот сервис еще не разу не отличался от живого iphone...

[tyzberd]

Mike Ro, и на живом есть скролл? Просто в этом сервисе отображается результат в iframe и у него обычный скролл, у моб так не будет

[Михаил Р.]

tyzberd, да, рядом лежит живой iphone, пока этот сервис показывает все на 100% идентично живому айфону, если в сервисе выставить Emulation > Mobile

[tyzberd]

тостер на моб тоже так joxi.ru/1A59gRJSn9ZyBA , или так joxi.ru/a2Xe67Yu1N7WZA ?