Вы гуляете с друзьями, смеетесь, веселитесь — когда кто-то задает группе настоящую головоломку: «Почему не существует батареек B?»

Вы в тупике. Твои друзья ошеломлены. Вы достаете свой смартфон и вводите вопрос в машину Google. И бум: в блоге компании, производящей аккумуляторы, появляется сообщение о единых на национальном уровне спецификациях размеров аккумуляторных элементов. Это именно то, что ты искал, зануда.

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

Это пример проблемы с областью просмотра.

Что такое видовой экран?

Область просмотра сайта контролирует ширину веб-страницы для устройства, на котором пользователь ее просматривает.

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

Если ваш сайт создан на основе Content Hub, вам не нужно беспокоиться о настройке области просмотра. Ваш сайт автоматически настроится под область просмотра любого устройства. Но если это не так, даже если вы используете адаптивный дизайн, вам необходимо настроить окно просмотра так, чтобы оно было удобным для посетителей с мобильных устройств.

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

Как ваш сайт выглядит с областью просмотра и без нее

Если вы не указываете порт дисплея для мобильных устройств, эти устройства будут отображать веб-страницу шириной обычного экрана рабочего стола, а затем масштабировать ее по размеру экрана, так что текст и графика будут очень маленькими. Это называется «резервной шириной» и варьируется от 800 до 1024 пикселей.

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

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

Изображение предоставлено: Разработчики Google

Сначала проверьте, настроили ли вы уже область просмотра.

Для проверки зайдите в веб-сайт Google Mobile Ready Check. Вставьте свой URL-адрес в пустое поле и нажмите «Отправить» внизу. Инструмент проведет ваш сайт через тест Google на совместимость с мобильными устройствами, и если ваша область просмотра не настроена, он сообщит вам об этом.

Если ваш область просмотра не настроена, продолжайте читать.

Как настроить область просмотра вашего сайта

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

Для этого просто скопируйте приведенный ниже фрагмент HTML и вставьте его в заголовок вашего сайта.

ширина устройстваначальный масштаб=1″>

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

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

Что это с красный текст?

Если вы оставите красный текст («ширина устройства») как есть, это просто означает, что вы не хотите указывать конкретную ширину для отображения вашего контента — и ваш веб-сайт автоматически подберет размер устройства пользователя. Большинству из вас захочется это сделать.

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

Но допустим, вы хотите установить определенную ширину. Например ширина iPhone варьируется, но предположим, что вы хотите, чтобы ваш сайт отображался специально для iPhone 6, когда человек держит его в альбомной ориентации. Ширина iPhone 6s в альбомной ориентации составляет 667 пикселей, поэтому вы можете разместить этот тег на своем веб-сайте:

667начальный масштаб=1″>

Все iPad имеют альбомную ширину 1024 пикселя, поэтому вы можете разместить этот тег на своем веб-сайте:

1024начальный масштаб=1″>

Значимо? Вот полный список размеров области просмотра. для вашей справки.

Помните, что бЕсли вы скажете, что ширина вашего макета равна ширине устройства, у вас возникнут проблемы, когда пользователи будут поворачивать свои мобильные устройства. Чтобы обойти это, вы *можете* использовать JavaScript. чтобы условно выбрать, какие атрибуты метатега использовать, как отмечает Ян Йейтс в этом сообщении в блоге … но самое простое решение, похоже, — полностью игнорировать ширину и просто сохранять ее на уровне «единичной ширины».

Часть «начального масштаба» тега HTML может оставаться равной единице несмотря ни на что. Это просто гарантирует, что когда кто-то откроет ваш контент, макет будет отображаться правильно в масштабе 1:1. Это помогает вашему веб-сайту использовать всю альбомную ширину независимо от ориентации мобильного устройства (книжная или альбомная).

Вот и все! У тебя есть вопросы? Задайте их в разделе комментариев.

Дополнительные советы о том, как улучшить производительность вашего сайта, можно найти в нашем недавно обновленном Степени сайта. Этот бесплатный онлайн-инструмент генерирует персонализированные отчеты на основе производительности вашего сайта, готовности к использованию на мобильных устройствах, SEO, безопасности и многого другого.