Razbezhkin
@Razbezhkin
программист, преподаватель

Ширина html страницы на мобильных устройствах?

Здравствуйте.

Решил я сделать веб страницу, которая бы отображалась на компе, ipad'е и смартфоне в читабельном виде, но не тут-то было.

Проблема, которая меня смутила заключается в следующем:

в css файле я определил свойство внешнего дива max-width: 980px; height: 100%;

на экране этот див занимает не более 980 пикселей, если окно сжать до меньшего размера то див занимает всю ширину.

на ipad'е страница всегда занимает всю ширину, но длинна строки в символах при повороте экрана сохраняется, причем при вертикальной ориентации экрана страница масштабируется, так что текст, нормально читаемый при горизонтальной ориентации, на вертикальной читается хуже (буквы стали меньше размером).

На смартфоне ситуация еще более веселая: там длина строки в символах примерно такая же как на ipad'е, но страница смасштабирована так, что текст без увеличения читать невозможно, ну а при увеличении масштаба появляются горизонтальный и вертикальный скроллинг.


Кроме того, я попробовал применить css media queries. так вот, запрос media screen and (max-width: 980px) на ipad'е подействовал. на смартфоне сработал при ширине 790px. как вертикально, так и горизонтально.


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


А теперь, собственно, вопрос: каким способом сделать страницу, которая будет отображаться нормально как в вертикальном, так и горизонтальном расположении экрана смартфона.


P.S. Может быть кто-нибудь подскажет ссылку на страницу, которая меняет свой внешний вид при повороте экрана ipad'а?
  • Вопрос задан
  • 29899 просмотров
Пригласить эксперта
Ответы на вопрос 3
rodweb
@rodweb
Front-end разработчик
Попробуйте HTML-фреймворки HTML5 Boilerplate. В них уже все сделано. Не могу сказать точно относительно айпада, но на Android-планшете верстка с media queries отлично работает с обеими ориентациями экрана.
Ответ написан
Razbezhkin
@Razbezhkin Автор вопроса
программист, преподаватель
Коллеги. Большое спасибо за подсказки. Есть продвижения в верстке для мобильных устройств.

Я добавил в блок тег />
Андроидовский смартфон стал после этого нормально отображать страницу, причем при смене ориентации ширина меняется и внешний вид подстраивается под нее. А вот ipad при смене ориентации страницу только масштабирует. Жаль что нет под рукой iphone, чтобы этот момент как то протестировать.

Продолжаю знакомиться с темой верстки для мобилок, спасибо еще раз за подсказки.
Ответ написан
bilazik
@bilazik
Козерог, считающий себя водолеем :Р
Если нет девайса под рукой - юзай f12 - toggle device mode(кнопка в виде смартфона) выбираешь любой аппарат и смотришь, как будет отображаться.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы