Настройка уровня масштабирования в мобильном браузере - PullRequest
5 голосов
/ 30 марта 2010

Я разрабатываю веб-сайт для мобильного доступа и хочу установить ширину страницы, высоту и размеры кнопок, чтобы они отображались на экране. Например, если пользователь использует HTC HD, весь экран будет 480х800 с размером кнопки 240х200. Однако IE mobile и Opera загружают страницу с некоторым уровнем масштабирования, поэтому кнопки отображаются либо слишком большими, либо слишком маленькими. Как я могу прочитать текущий уровень масштабирования в javascript или установить его из javascript?

Ответы [ 2 ]

5 голосов
/ 06 апреля 2010

Взгляните на <meta name="viewport">. Он поддерживается на самых разных мобильных платформах, включая (AFAIK) iPhone, Android, Blackberry, Opera Mobile и даже IE6 Mobile. По сути, он позволяет предварительно установить ширину устройства, уровень масштабирования и максимальное / минимальное увеличение. Загляните на сайт разработчика Apple и получите дополнительную информацию.

Кроме того, вы можете использовать медиазапросы CSS, чтобы определять форму и размер браузера, и соответственно обрабатывать различные макеты (и т.д.) Опять же, они довольно широко поддерживаются, и на сайте разработчиков Apple есть больше информации.

0 голосов
/ 06 апреля 2010

Вы не должны полагаться на использование JavaScript на мобильных устройствах, потому что он все еще не широко поддерживается на всех телефонах. Вместо этого вы должны установить ширину страницы равной ширине браузера, чтобы ваши страницы отображались на 100%, например body {width: 100%; margin: 0; padding: 0;}

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

...