Действительно ли метатег видового экрана необходим?

Ответ 1

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

Начиная с Safari на iOS (или как мы тогда должны были называть iOS), окна просмотра мобильного браузера были "виртуальными". Хотя область просмотра может занимать (например) только 320 физических пикселей пространства в интерфейсе, браузер создает "виртуальный" область просмотра, которая больше (по-моему, 980 пикселей по умолчанию на iOS) и отображает содержимое там, затем уменьшает виртуальный видовой экран до тех пор, пока он не впишется в реальные физические пиксели, доступные на экране устройства.

Метатег viewport позволяет вам сообщать мобильному браузеру, какой размер должен иметь этот виртуальный viewport. Это часто полезно, если вы на самом деле не изменяете дизайн своего сайта для мобильных устройств, и он отображается лучше с большим или меньшим виртуальным окном просмотра. (Я полагаю, что по умолчанию было выбрано 980 пикселей, потому что он хорошо выполнил рендеринг большого количества громких сайтов в 2007 году; для любого конкретного сайта может быть лучше другое значение.)

Лично я всегда использую <meta name="viewport" content="width=device-width, initial-scale=1"> чтобы виртуальный видовой экран соответствовал размерам устройства. (Обратите внимание, что initial-scale=1, по-видимому, необходимо, чтобы виртуальный видовой экран адаптировался к ландшафтному режиму на iOS.) Это заставляет мобильные браузеры вести себя так же, как всегда настольные браузеры, к чему я привык.

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

Я полагаю, вы установили базовый размер шрифта достаточно большим, чтобы он был разборчивым? Не могли бы вы дать ссылку на один из созданных вами сайтов, чтобы мы могли увидеть пример?

Ответ 2

Без просмотра на вашем устройстве используется виртуальный видовой экран, который по умолчанию является фактически уменьшенной версией вашего сайта, это около 980 пикселей на iPhone и 800 пикселей на andriod. Как только вы установите видовое окно и отключите это масштабирование, устройство обрабатывает веб-сайт так, как оно есть, и измеряет его ширину около 480 пикселей или 320 пикселей в зависимости от устройства и ориентации и т.д.

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

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

Ответ 3

Итак, чтобы ответить на мой собственный вопрос. Это не обязательно.

Вы можете использовать запросы минимальной и максимальной ширины для стилей настольной версии на определенных контрольных точках.

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

Этот метод, однако, имеет существенную проблему обслуживания.

Метатег viewport позволяет просто использовать max и min-width, которые охватывают от настольных компьютеров до мобильных устройств.

Ответ 4

Не для всех устройств, но да для мобильных телефонов. Мобильные браузеры отображают страницы в виртуальном "окне", видовом экране, который обычно шире экрана, поэтому им не нужно сжимать каждый макет страницы в крошечном окне (следовательно, он разбивает некоторые сайты, оптимизированные для мобильных устройств, и пользователи должны увеличение). Мобильный Safari представил "метатег просмотра", чтобы веб-разработчики контролировали размер и масштаб видового экрана. Теперь все мобильные браузеры поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта. Типичный сайт, оптимизированный для мобильных устройств, должен содержать следующий тег:

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

Свойство width определяет размер окна просмотра. Ширина экрана в пикселях CSS в масштабе 100%. Свойство начального масштаба управляет уровнем масштабирования при первой загрузке страницы. Масштабируемые, минимальные и масштабируемые пользователем свойства управляют тем, как пользователям разрешено увеличивать или уменьшать страницу.

https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19

Ответ 5

Вы должны обязательно использовать теги viewport, поскольку они имеют возможность сделать жизнь веб-разработчиков бесконечно проще. Они позволяют вам легко контролировать точные размеры рендеринга и/или уровни увеличения ЛЮБОГО экрана (даже если вы хотите desktop). Это делает создание сайта для любого устройства куском пирога. Но знайте, что с великой силой приходит большая ответственность. Используйте эту власть с умом (и не отключайте масштабирование).

Ответ 6

Вы все равно можете использовать метатаг viewport для оптимизации разрешения на вид устройства и возможности масштабирования пользователя:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">

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

Ответ 7

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

Ответ 8

Для тех, кто сомневается, самый простой способ - это проверить без него. Я сделал это и пришел к быстрому разрешению - если бы мне нужно было оставить только один метатег, это было бы так (над "описанием" и т.д.). На самом деле, если бы мне пришлось выбирать между только этим и всеми остальными, я бы отдал и все прочее. Просто проверь это!