Как сделать, чтобы мобильная веб-страница не уменьшалась? - PullRequest
Новая
       1

Как сделать, чтобы мобильная веб-страница не уменьшалась?

7 голосов
/ 16 августа 2011

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

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

Хотя этого не происходит. Я даже специально установил размер своей страницы на body{ width: 300px;}, но при загрузке в телефон она сжимается в верхнем левом углу, вокруг нее много свободного места.

Что я делаю не так?

Ответы [ 2 ]

12 голосов
/ 16 августа 2011

Вам необходимо использовать метатег viewport 

<!doctype html>
<html>
<head>
    <title>Hello world!</title>

    <meta name="viewport" content="width=device-width"/>
</head>

<body>

<p>Hello world!</p>

</body>
</html>

Подробнее читайте здесь http://davidbcalhoun.com/2010/viewport-metatag

0 голосов
/ 16 августа 2011

Это связано с тем, что ширина тела зависит от устройства просмотра.

Большинство современных телефонов имитируют браузер на рабочем столе, поэтому ширина 300 пикселей составляет 300 пикселей по отношению к общему окну браузера.По сути, вы увидите то же самое в браузере своего ПК, что и в браузере телефона.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...