Какова цель метатега viewport?

Question

Я проектирую мобильный веб-сайт и сначала попробовал использовать обычную HTML-страницу с тегом h1.Он выглядит очень маленьким, поэтому я искал и обнаружил, что мне нужно добавить следующие строки:

<meta name="viewport" content="width=device-width" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />

После попытки понять несколько веб-страниц, я все еще в замешательстве.Является ли область просмотра дополнительной шириной устройства, например, на iPhone 960px?Несмотря на то, что у iPhone 4 всего 640 пикселей, он уменьшает его размер, чтобы имитировать этот размер?Таким образом, чтобы не думать, что размер окна просмотра составляет 960 пикселей, он говорит, что он равен размеру экрана?

Если это так, имеют ли другие браузеры / устройства, такие как работающие на Android, разные ширины(кроме 960px)?

Answer 1

Согласно документации jquery для мобильных устройств, существует ошибка для iOS с этим:

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

Они рекомендуют следующую строку:

<meta name="viewport" content="width=device-width, initial-scale=1"> 

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