Здравствуйте.
Решил я сделать веб страницу, которая бы отображалась на компе, 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'а?
Простой
Средний
