User scalable: Viewport — Глоссарий | MDN

Viewport — Глоссарий | MDN

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

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

Meta-тег viewport сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб. Этот тег необходимо добавлять в секцию HEAD.

Пример:

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

Атрибуты метатега viewport

Meta-тег viewport может иметь следующие атрибуты, указанные через запятую (,):

width – ширина области просмотра.

Значением атрибута является целое неотрицательное число от 200 до 10000 пикселей или константа device-width, которая задаёт ширину страницы в соответствии с размером экрана.

Если значение не задано, по умолчанию устанавливается – в мобильном Safari = 980px, Opera = 850px, Android WebKit = 800px, IE = 974px.

Примечание: для сайтов с адаптивным дизайном рекомендуется использовать: width=device-width.

height – высота области просмотра.

Значением атрибута является целое неотрицательное число от 233 до 10000 пикселей или константа device-height, которая задаёт высоту страницы в соответствии с размером экрана.

Примечание: если указан атрибут width, указывать атрибут height не обязательно.

initial-scale – начальный масштаб страницы.

Значением атрибута является вещественное число от 0.1 до 1.0. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

Примечание: в некоторых операционных системах (iOS, Windows Phone и т.д.) ширина страницы, при повороте, остаётся неизменной. Вместо перераспределения контента выполняется его масштабирование. Поэтому рекомендуется использовать: initial-scale=1.0.

user-scalable – доступность масштабирования страницы пользователем.

Значение атрибута является логическое «yes» (1) – можно масштабировать или «no» (0)– нельзя масштабировать.

Примечание: рекомендуется использовать значение «yes» , а т.к. оно установлено по умолчанию, то user-scalable можно и не указывать.

minimum-scale – минимальный масштаб области просмотра.

Значением атрибута является вещественное число от 0.1 до 1.0. В мобильном браузере Safari по умолчанию 0.25. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

maximum-scale – максимальный масштаб области просмотра.

Значением атрибута является вещественное число от 0.1 до 1.0 . В мобильном браузере Safari по умолчанию 1.6. Значение 1.0 определяет масштаб 1:1, т.е. «не масштабировать».

Примечание: избегайте атрибутов user-scalable, minimum-scale и maximum-scale, т.к. они отрицательно сказываются на доступности содержания.

Meta-тег HandheldFriendly определяет оптимизирована ли страница сайта под мобильные устройства на Palm и Blackberry, в таком браузере как AvantGo. Сейчас распознаётся и многими другими мобильными браузерами.

Пример:

<meta name="HandheldFriendly" content="true">

Meta-тег MobileOptimized (http://goo.gl/ZpLjZz) задаёт ширину области просмотра в мобильных браузеров IE Mobile или Pocket IE. Является аналогом атрибута width в meta-теге viewport.

Пример:

<meta name="MobileOptimized" content="320">

<meta name="MobileOptimized" content="width">

Meta-тег apple-mobile-web-app-capable (http://goo.gl/VGDYQC) позволяет странице работать в полноэкранном режиме, актуален для мобильных устройств Apple.

Пример:

<meta name="apple-mobile-web-app-capable" content="yes">

Используемый мной набор meta-тегов для сайтов с адаптивным дизайном, заточенным под мобильные устройства:

<meta name='viewport' content='width=device-width,initial-scale=1'/>
<meta content='true' name='HandheldFriendly'/>
<meta content='width' name='MobileOptimized'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>

General Knowledge

Мета-тег ViewPort

Рубрика: HTML верстка

Разберем мета-тег viewport , от компании Apple:

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

initial-scale — задает начальный масштаб страницы, то есть как отобразить сайт на устройстве при загрузке, 1 к 1 и увеличено или уменьшено в масштабе, этим параметром можно также запретить или ограничить масштабирование сайта на устройстве что также не рекомендуется.

user-scalable -  запрещает или разрешает масштабирование страницы сайта.

То есть если у вас заверстано несколько макетов для различных разрешений (таких как 320, 640 и тд.) то вам подойдет задать такие параметры:

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

Нельзя сочетать такие параметры как user-scalable=no или maximum-scale=1 с initial-scale=1.  Отключите возможность масштаба страницы! Тем самым не вся страница сможет просматриваться на устройстве, пример:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

Таблица описания значений мета-тега viewport:

Теги: iphone, viewport

Поделись с друзьями:

Нет комментариев для записи Мета-тег ViewPort

accessibility — Пересматривая масштабируемый пользователем = нет

Ранее для достижения эффекта изменения размера для мобильных устройств я когда-либо использовал только width=device-width, initial-scale=1, который работал без проблем.

Я недавно обнаружил user-scalable=no как опция для метапортпорта. Сначала я подумал, что это ярлык для настройки maximum-width=1, minimum-width=1, как бы то ни было, по моему мнению, одно огромное преимущество :

Это позволяет им [веб-браузеру] избавиться от страшной задержки в 300 мс на событиях касания, которые браузер ожидает, чтобы посмотреть, не станет ли ваше одно касание двойным касанием.

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

Чтение в user-scalable еще несколько звонят в колокола тревоги. Общее мнение, как представляется, заключается в том, что оно, наряду с maximum/minimum-width, «вреден» для доступности. Некоторые фрагменты из статей или постов, написанных в этом году :

«И хотя initial-scale = 1 очень полезно, максимальный масштаб — плохая новость для доступности.»

«Чаще всего эти вредные объявления абсолютно не нужны: maximum-scale=1, user-scalable=no «

Что меня интересует, так это ссылки на статьи, написанные два и три года соответственно, и на аргументы в каждой:

http://a11yproject.com/posts/never-use-maximum-scale/

Установив Maximum-Scale = 1,0, вы отключаете эту функцию, чтобы использовать пинч-зум на мобильных устройствах, и заставляете пользователей просматривать вашу страницу определенным образом.

http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho

[…] но есть много случаев, когда пользователю может понадобиться увеличить изображение: мелкий шрифт (по крайней мере, для нужд пользователя), проверка некоторых деталей на фотографии и т. д.

а также

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

Хотя я понимаю некоторые из затронутых проблем, мне интересно, не приводят ли некоторые аргументы о вещах, которые не являются или не должны быть проблемами.

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

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

Имея это в виду, возможно, что user-scalable=no (или максимальная/минимальная ширина) не так уж и ужасно, как кажется, и с некоторой продуманностью/планированием в отношении доступности его можно было бы безопасно использовать и воспользоваться преимуществами, которые он приносит?

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

Meta Viewport для браузера по умолчанию для Android Oh! Android

Я пытаюсь показать изображение (320×480 пикселей) на веб-странице на Android. Я пытаюсь настроить метаданные viewport, чтобы я хотел, чтобы изображение отображалось в полноэкранном режиме.

На самом деле я просто настроил видовое окно

<meta name="viewport" content="width=320px" /> 

И он работает отлично, за исключением браузера Android по умолчанию. Я пробовал Chrome, Opera и Firefox, и все они отображают изображение правильно.

Что касается этого сообщения Полная веб-страница и отключенный метадатчик view viewport для всех мобильных браузеров, я попытался настроить его таким образом без успеха:

 <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" /> 

или

 <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=320,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" /> 

Вы знаете, как правильно настроить окно просмотра?

Спасибо

 <meta name="viewport" content="user-scalable=no, width=device-width"> 

User-scaleable – управление может зависнуть, пользователь может «зажимать-масштабировать».

Width – ширина окна просмотра.

Все атрибуты требуют целочисленных значений, а не значений с плавающей запятой.

Другими словами, 1, а не 1.0. Или вы можете использовать процент.

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

Я попробовал следующее. Он отлично работает для меня.

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

Мне нравится:

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

 <meta name="viewport" content="width=321; user-scalable=no;" /> 

Android только принимает ширину видового экрана БОЛЬШЕ 320, поэтому настройка на 321 сделала трюк для меня.

Создание адаптивных сайтов для iOS

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

Адаптивный сайт для iPhone

Стандартный сниппет для адаптивной верстки долгое время выглядел следующим образом:

Однако, начиная с версии iOS 9 стали поступать жалобы на ошибки в адаптивной верстки для смартфонов и планшетов Apple.

Атрибут shrink-to-fit

Для создания адаптивного сайта, в CSS используются следующие свойства:

Для задания свойства max-width вместо пикселей (px) используются значения, заданные в процентах (%). Однако встречаются ситуации, когда все же необходимо задать значение в пикселях. Зададим блок:

В адаптивной верстке, если не указано свойство overflow-x: hidden, такой блок будет выходить за пределы экрана, и пользователю будет показана горизонтальная полоса прокрутки. Однако, механизм рендеринга Safari в iOS, помещает заданный нами блок в 1200px целиком в окно браузера c шириной 375px . Это приведет к тому, что остальные блоки будут ужаты в размерах по отношению к our__block.

Решение проблемы с версткой сайта для iOS

В ответ на жалобы разработчиков, компания Apple рекомендовала в принудительном порядке использовать значение «shrink-to-fit=no», которое уменьшает размер страницы до размера окна просмотра браузера. Для правильного отображения элементов страницы достаточно изменить стандартный meta viewport на:

Outlooker.ru занимается разработкой и созданием сайтов в Москве и Санкт-Петербурге. Мы работаем с 2009 года и готовы предложить свои услуги в области веб-разработки и консалтинга.

[Адаптация мобильного терминала Viewport Viewport] Что такое идеальный Viewport для установки метаатрибута мобильного терминала

1. Посмотрите на мой код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="initial-scale=0.33,maximum-scale=0.33,minimum-scale=0.33,user-scalable=no">-->
    <!--<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">-->
    <!--<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">-->
    <!--<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">-->
    <title>Title</title>
</head>
<body>
</body>
</html>
<script>
    console.log(document.documentElement.getBoundingClientRect().width)
</script>

2. Сначала посмотрите на ничего и установите для печати непосредственно console.log (document.documentElement.getBoundingClientRect (). Width). Это позволяет получить ширину области просмотра. См. Iphone под окном просмотра 980, который установлен производителем браузера.

2. Как насчет идеальной области просмотра? Он равен 375, это ширина экрана iphone iphone 375, поэтому в идеальном окне просмотра ширина экрана равна ширине окна просмотра, поэтому, когда мобильный терминал адаптирован, он обычно устанавливается в идеальный режим окна просмотра идеальный видовой экран

   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

3. Установите коэффициент масштабирования 0,5 и найдите, что область просмотра становится 750

    <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

4. Что если он установлен на 0,3333? Размер области просмотра стал в 3 раза больше экрана, который часто называют 2 раза экрана, в 3 раза экрана.

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

Использование метатега области просмотра для управления макетом в мобильных браузерах — HTML: HyperText Markup Language

В этой статье описывается, как использовать тег «viewport» для управления размером и формой области просмотра.

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

Устройства с узким экраном (например,грамм. мобильные устройства) визуализируют страницы в виртуальном окне или окне просмотра, которое обычно шире экрана, а затем сжимают визуализированный результат, чтобы его можно было увидеть сразу. Затем пользователи могут панорамировать и масштабировать, чтобы увидеть различные области страницы. Например, если экран мобильного устройства имеет ширину 640 пикселей, страницы могут отображаться с виртуальным окном просмотра 980 пикселей, а затем он будет уменьшен до размера 640 пикселей.

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

Введите метатег области просмотра

Однако этот механизм не очень хорош для страниц, оптимизированных для узких экранов с использованием медиа-запросов — например, если виртуальное окно просмотра составляет 980 пикселей, медиа-запросы с разрешением 640 или 480 пикселей или меньше никогда не будут использоваться, ограничивая эффективность таких методов адаптивного дизайна.

Чтобы смягчить эту проблему виртуального окна просмотра на устройствах с узким экраном, Apple представила «метатег видового экрана» в Safari iOS, чтобы веб-разработчики могли управлять размером и масштабом области просмотра.Многие другие мобильные браузеры теперь поддерживают этот тег, хотя он не является частью какого-либо веб-стандарта. Документация Apple хорошо объясняет, как веб-разработчики могут использовать этот тег, но нам пришлось провести некоторую детективную работу, чтобы точно выяснить, как реализовать его в Fennec. Например, в документации Safari говорится, что содержимое представляет собой «список с разделителями-запятыми», но существующие браузеры и веб-страницы используют любое сочетание запятых, точек с запятой и пробелов в качестве разделителей.

Узнайте больше о видовых экранах в различных мобильных браузерах в «Сказке о двух видовых экранах» в quirksmode.орг.

Типичный сайт, оптимизированный для мобильных устройств, содержит что-то вроде следующего:

Свойство width управляет размером области просмотра. Он может быть установлен на определенное количество пикселей, например width = 600 , или на специальное значение device-width , которое представляет собой ширину экрана в пикселях CSS в масштабе 100%. (Имеются соответствующие значения height и device-height , которые могут быть полезны для страниц с элементами, которые изменяют размер или положение в зависимости от высоты области просмотра.)

Свойство initial-scale управляет уровнем масштабирования при первой загрузке страницы. Свойства с максимальным масштабом , с минимальным масштабом и с масштабируемыми пользователем свойствами управляют тем, как пользователям разрешено увеличивать или уменьшать масштаб страницы.

Предупреждение: Использование , масштабируемого пользователем = нет , может вызвать проблемы с доступом для пользователей с нарушениями зрения, такими как слабовидение.

В последние годы разрешение экранов выросло до размера, при котором отдельные пиксели трудно различить человеческим глазом.Например, современные смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920–1080 пикселей (~ 400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы с меньшим физическим размером, переводя несколько аппаратных пикселей для каждого «пикселя» CSS. Первоначально это вызывало проблемы с удобством использования и удобочитаемостью на многих веб-сайтах, оптимизированных для сенсорного ввода. Питер-Пол Кох писал об этой проблеме в «Пиксель — это не пиксель».

На экранах с высоким разрешением страницы с начальным масштабом = 1 будут эффективно масштабироваться браузерами.Их текст будет гладким и четким, но их растровые изображения, вероятно, не будут использовать полное разрешение экрана. Чтобы получить более четкие изображения на этих экранах, веб-разработчики могут захотеть проектировать изображения — или целые макеты — в большем масштабе, чем их окончательный размер, а затем уменьшать их с помощью CSS или свойств области просмотра. Это соответствует спецификации CSS 2.1, которая гласит:

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

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

Соотношение пикселей по умолчанию зависит от плотности отображения. На дисплее с плотностью менее 200 точек на дюйм соотношение составляет 1,0. На дисплеях с плотностью от 200 до 300 точек на дюйм соотношение составляет 1,5. Для дисплеев с плотностью более 300 точек на дюйм соотношение является целым числом (, плотность /150 точек на дюйм). Обратите внимание, что соотношение по умолчанию истинно только тогда, когда масштаб области просмотра равен 1. В противном случае соотношение между пикселями CSS и пикселями устройства зависит от текущего уровня масштабирования.

Сайты могут устанавливать для своего окна просмотра определенный размер.Например, определение "ширина = 320, начальный масштаб = 1" может использоваться для точного размещения на небольшом дисплее телефона в портретном режиме. Это может вызвать проблемы, если браузер не отображает страницу большего размера. Чтобы исправить это, браузеры при необходимости увеличивают ширину области просмотра, чтобы заполнить экран в требуемом масштабе. Это особенно полезно на устройствах с большим экраном, таких как iPad. (В книге Аллена Пайка «Выбор области просмотра для сайтов iPad» есть хорошее объяснение для веб-разработчиков.)

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

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

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

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

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

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

мета-область просмотра позволяет увеличивать масштаб | Инициатива веб-доступности (WAI)

Содержание страницы

Применяемость

Это правило применяется к каждому элементу meta с атрибутом name , значение которого без учета регистра соответствует области просмотра и имеет атрибут content .

Ожидание

Для каждой тестовой цели атрибут содержимого , значение которого сопоставлено со списком пар свойство / значение в зависимости от пользовательского агента, не:

• указать свойство масштабируемое пользователем со значением № ; ни
• укажите свойство максимальное значение со значением менее 2.

Предположения

Если какое-либо из следующих условий неверно, это правило может завершиться ошибкой, пока выполняется критерий успеха 1.4.4 Изменить размер текста и 1.4.10 Reflow все еще можно удовлетворить:

• На странице есть видимое содержимое.
• Нет другого доступного механизма для изменения размера текстового содержимого.
• По умолчанию содержимое не отображается таким образом, чтобы умещаться в области 320 на 256 пикселей CSS, и для этого необходимо переформатировать.

Поддержка специальных возможностей

Настольные браузеры игнорируют элемент viewport meta , а большинство современных мобильных браузеров либо игнорируют его по умолчанию, либо имеют опцию доступности, которая позволяет масштабировать.Это правило не актуально ни для настольных браузеров, ни для большинства современных мобильных браузеров. Только пользователи со старыми мобильными браузерами могут столкнуться с проблемами, проверенными этим правилом.

Фон

Это правило разработано специально для версии 1.4.4 «Изменение размера текста», которая требует, чтобы размер текста можно было изменять до 200%. Поскольку текст, размер которого нельзя изменить до 200%, не может поместиться в области размером 320 на 256 пикселей CSS, это правило также соответствует 1.4.10 Reflow. Все пройденные примеры в этом правиле удовлетворяют обоим критериям успеха.

Тестовые наборы

Пройдено

Пройден Пример 1

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

  






Lorem ipsum
 

  

Пройден Пример 2

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

  






Lorem ipsum



  

Пройден Пример 3

Этот элемент мета области просмотра позволяет пользователям масштабировать контент до 600%, поскольку для него максимальный масштаб установлен на 6.0.

  






Lorem ipsum



  

Пройден Пример 4

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

  






Lorem ipsum



  

Пройден Пример 5

Этот элемент мета области просмотра не препятствует пользовательскому масштабированию, поскольку для него maximum-scale установлено значение -1, что приводит к удалению этого значения.

  






Lorem ipsum



  

Не удалось

Неудачный пример 1

Этот элемент мета области просмотра предотвращает масштабирование пользователем, поскольку для него масштабируемый пользователем установлен на no .

  






Lorem ipsum



  

Неудачный пример 2

Этот элемент мета области просмотра не позволяет пользователям масштабировать контент до 200%, поскольку для него максимальный масштаб установлен на 1.5.

  






Lorem ipsum



  

Неудачный пример 3

Этот элемент мета области просмотра не позволяет пользователям масштабировать контент до 200%, поскольку для него максимальный масштаб установлен на 1.0.

  






Lorem ipsum



  

Неудачный пример 4

Этот элемент мета области просмотра не позволяет пользователям масштабировать контент до 200%, потому что для него максимальный масштаб установлен на да , что переводится в 1.0.

  






Lorem ipsum



  

неприменимо

Неприменимый пример 1

Нет элемента viewport meta .

  






Lorem ipsum



  

Неприменимый пример 2

Этот элемент мета области просмотра не имеет атрибута содержимого .

  






Lorem ipsum



  

Глоссарий

Результат

Результат — это вывод, который следует из оценки правила ACT на испытуемом или одной из составляющих его целей теста. Результат может быть одного из трех следующих типов:

• Неприменимо: Ни одна часть испытуемого не соответствует применимости
• Пройдено: Испытательная цель соответствует всем ожиданиям
• Не удалось: Тестовая цель не соответствует всем ожиданиям

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

Примечание: Реализации, использующие схему EARL10, могут выразить результат с помощью свойства результата. В дополнение к пройдено , не удалось и неприменимо , EARL 1.0 также определил неполный результат . Хотя это не может быть результатом применения правила ACT в целом, часто бывает, что правила оцениваются только частично.Например, когда применимость была автоматизирована, но ожидания приходилось оценивать вручную. Такие «промежуточные» результаты могут быть выражены с помощью неполного результата .

видимый

Контент, воспринимаемый зрением.

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

Контент определен в WCAG.

Подробнее см. Примеры видимых.

Реализации

Этот раздел не является частью официального правила. Он заполняется динамически и
не учитывается в истории изменений или дате последнего изменения.

История изменений

Это первая версия этого правила ACT.

Помогите улучшить эту страницу

Поделитесь своими идеями, предложениями или комментариями по электронной почте в общедоступный список wai-eo-editors @ w3.org или через GitHub.

Back to Top

масштабируемый пользователем = нет и подавление подавления масштабирования

масштабируемое пользователем = нет и подавление подавления масштабирования — QuirksBlog

масштабируется пользователем = нет и подавление масштабирования

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

По крайней мере, я так думал. Оказывается, это не так.

В эти выходные меня предупредили, что подавление масштабирования все еще работает в браузерах Android, но не на iOS. Быстрый тест показал, что Chrome, Edge, Firefox и UC на Android подчиняются user-scaleable = no и не позволяют пользователю изменять масштаб. Только Samsung Internet сохраняет хладнокровие и позволяет масштабировать.

Ужасно.А также привратник

На всякий случай пропиши: подавление масштабирования пользователя ужасно.

Несмотря на постоянное совершенство моего 50-летнего зрения, обширный всемирный заговор, заключающийся в изменении размеров всех шрифтов на все меньшие и меньшие значения, вынуждает меня увеличивать масштаб на сайтах, чьи невежественные дизайнеры — которые, как я считаю, должны быть отнесены к разработке физических листовок для третьесортные рекламные агентства, работающие на кокаине, хотя эта мысль делает меня привратником, что на намного хуже, чем на , чем дерьмо из-за базовой веб-доступности, поэтому позвольте мне подчеркнуть, насколько чудесно приветствуют в нашем мире, эти дизайнеры — подумайте Шрифт 6px — самый подходящий выбор.

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

Технические характеристики

Давайте вернемся к позитиву и ненадолго похвалим Apple. В iOS подавление масштабирования было отключено с iOS 10, хотя для WebView было сделано исключение, поскольку оно может не подходить для масштабирования приложения WebView частично-нативно-частично. Мммм … хорошо, я вроде как вижу в этом суть.

Тем не менее, можно программно отключить подавление масштабирования в WebView, и, скорее, к моему удивлению создатели Chrome для iOS, который, как мы помним, использует iOS WebView, а не Blink в качестве механизма рендеринга, решили это сделать.Или, может быть, по умолчанию изменились, я не знаю. В любом случае Apple в основном на правильном пути.

Так же и Samsung; по умолчанию масштабирование включено. Ура! Мой выбор в пользу Samsung Internet в качестве мобильного браузера по умолчанию подтвердился. Я буду придерживаться этого, большое спасибо.

Другие браузеры Android, Chrome, Edge, UC и Firefox, все подавляют масштабирование пользователя. Интересно то, что браузерам на основе Chromium требуется только масштабируемых пользователем , в то время как бит = no является строго необязательным.Чтобы доказать это, я провел тест с user-scaleable = antidisestablishmentarianism . Он подавляет увеличение в браузерах Chromium. По-видимому, увеличение масштаба изображения способствует прекращению существования.

Firefox имеет несколько более строгий синтаксис, где масштабируемый пользователем без аргументов подавляет масштабирование, как и аргументы № и 0 , но любое другое значение отклоняется и не подавляет масштабирование.

К счастью, явное значение user-scaleable = yes или 1 работает во всех браузерах, и масштабирование не подавляется.

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

Пользовательские настройки

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

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

Поговорим о настройках. Chrome, Edge и Firefox позволяют пользователям переопределить user-scaleable = no и подавить подавление масштабирования. (Этот последний пункт кажется вам сложным? Поздравляю, теперь вы понимаете часть проблемы.)

Вот настройки:

• Chrome на Android: Настройки -> Специальные возможности -> Принудительно включить масштабирование
• Edge на Android: Настройки -> Специальные возможности -> Принудительное масштабирование
• Firefox для Android: Настройки -> Специальные возможности -> Масштабирование всех веб-сайтов
• Samsung Internet: Настройки -> Внешний вид -> Управление масштабированием веб-страниц; по умолчанию включен
• UC на Android: Инструменты -> Настройки (непонятный значок шестеренки) -> Настройки браузера -> Шрифт и макет -> Принудительное масштабирование страницы; НО включение этого ничего не делает

И Samsung Internet, и UC также имеют настройки, но Samsung Internet включен по умолчанию (т. Е.е. он подавляет подавление масштабирования), а переключение настройки UC ничего не делает: масштабирование по-прежнему подавляется.

Дело в том, что ни один пользователь не использует эти настройки и даже не знает, где их найти. (Честно говоря: нашли бы вы их во всех браузерах? Вы бы посмотрели?)

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

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

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

Google, Mozilla, UC, Microsoft, сделайте свою игру лучше. Сделайте подавление подавления масштабирования по умолчанию. Убедитесь, что пользователи всегда могут масштабировать. В качестве дополнительного бонуса мы можем бросить под поезд всех тех третьесортных дизайнеров, которые не умеют проектировать для Интернета.(Или автобус. Или машину. Я гибкий.)

[user-scalable = «no»] и [максимальный масштаб] Ошибки маяка »Скрепи

Что вы думаете о масштабировании и масштабировании? Опыт, который ваш веб-сайт предоставляет пользователям, тесно связан с его оценкой UX. И, конечно же, теперь мы знаем, что означает UX, намного лучше, чем раньше: Высокий уровень доступности, доступности и возможности поиска являются одними из самых основных принципов UX. Если вы также заботитесь о том, чтобы ваш веб-сайт давал наилучшие результаты во всех этих отношениях, вас может смутить предупреждение, показанное в аудитах доступности Google Lighthouse: [user-scalable = "no"] используется в < meta name = "viewport" элемент или атрибут [максимальный масштаб] меньше 5.

Итак, что именно это означает? Когда вы видите этот аудит в Google Lighthouse, как узнать, в чем проблема, и как ее решить? Сегодня мы поговорим о [user-scalable = "no"] и [максимальный масштаб] атрибут меньше 5 проблем с экспертами Screpy в полной мере.

Перед тем, как все начать, сделаем небольшую заметку: Screpy, который позволяет полностью отслеживать ваш сайт, работает с интеграцией с Google Lighthouse.Как так?

Аудит [user-scalable = ”no”] и [maximum-scale]

С этого момента вам не нужно использовать несколько платформ, чтобы понять, как ваш сайт работает с точки зрения различных показателей. Благодаря интеграции Screpy с Google Lighthouse вы можете легко и быстро выполнять все аудиты и просматривать предупреждения, предлагаемые Lighthouse. Есть также небольшой бонус: благодаря продвинутой системе задач Screpy на базе искусственного интеллекта есть кто-то, кто может рассказать вам, как решить каждую проверку! Теперь процесс оптимизации вашего сайта стал намного проще, чем раньше, ребята!

Вы хотите увеличить посещаемость своего сайта?

Попробуйте бесплатно увеличить посещаемость вашего сайта!

Главное, что пытается сказать это предупреждение, которое было показано в результате проверки доступности:

Посетитель, использующий ваш сайт в современных браузерах, должен иметь возможность увеличивать до 500% содержимого вашей страницы.Если вы не предлагаете эту возможность, вы заставляете своих пользователей посещать сайт с низким UX. Здесь наличие атрибута с именем , масштабируемое пользователем = «нет» или установка максимального масштаба меньше 5 предотвращает это.

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

• Параметр user-scalable = "no" в атрибуте : этот тип параметра в ресурсе кода сбрасывает шанс увеличения на сайте.Пользователи не могут каким-либо образом увеличивать масштаб на своем мобильном устройстве или рабочем столе, и это создает серьезную проблему, особенно когда текст небольшой, а размер устройства отличается от ожидаемого.
• Установка атрибутов с максимальным масштабом меньше 5: Пользователи могут увеличивать масштаб страницы этого типа, но этого недостаточно. Увеличение до 500% недоступно. Это негативно сказывается на пользовательском опыте.

Почему нельзя отключать масштабирование и масштабирование?

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

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

Почему нельзя отключать масштабирование и масштабирование?

Как правило, в соответствии с Руководством по обеспечению доступности веб-контента Google говорит следующее: вы должны показывать свою веб-страницу пользователям, которые позволяют масштабирование не менее 200%. Лучше всего разрешить масштабирование на 500% и отредактировать исходный код таким образом.

Почему важны предупреждения [user-scalable = ”no”] и [maximum-scale]?

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

Аудит Google Lighthouse в отношении масштабирования и увеличения

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

[user-scalable = ”no”] используется в элементе или атрибут [максимальный масштаб] меньше 5

Если хотите, поделимся с вами скриншотом Google Lighthouse:

Вы хотите увеличить посещаемость своего сайта?

Попробуйте бесплатно увеличить посещаемость вашего сайта!

Вышеупомянутое предупреждение состоит из трех основных частей:

1. Заголовок предупреждения : В нем указано, с какой именно проблемой связано предупреждение.
2. Пояснение к предупреждению : Здесь владельцы веб-сайтов информируются о том, к какому негативному опыту может привести данная проблема, и оставляют ссылку для тех, кто хочет узнать больше.
3. Неисправные элементы : Хотя Google Lighthouse уведомляет пользователей о проблеме, обнаруженной в результате лабораторного эксперимента, также сообщает им, где именно эта проблема. Внутри неисправных элементов пользователю отображается фрагмент кода, вызывающий проблему. Таким образом, пользователь может быстро решить проблему, выполнив поиск в исходном коде.

Если вы получили предупреждение, подобное приведенному выше, это может быть две разные причины:

Как решить проблему масштабируемости пользователя

1. масштабируемость пользователя = Это атрибут содержимого, который можно настроить с помощью параметра «нет». В этом случае пользователи никак не могут масштабировать изображение. Google Lighthouse выдает это предупреждение.
2. maximum-scale = Число меньше 5 может быть указано для параметра максимального масштаба на вашем сайте. В этом случае возможности масштабирования уменьшаются.Google Lighthouse выдает это предупреждение.

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

Как пройти аудит масштабирования или масштабирования Google Lighthouse?

1. Прежде всего, вам нужно перейти к метатегу точки обзора.
2. Если здесь есть параметр user-scalable = "no" , сначала найдите его. Если вы его удалите, ситуация с отключением пользователя исчезнет.
3. Если ваша проблема еще не решена, найдите параметр максимального масштаба в исходном коде и посмотрите на данное значение для него. Если это значение меньше пяти, увеличьте его и исправьте. Таким образом, вы легко передадите соответствующий параметр Google Lighthouse и увеличите значения UX.

Какое влияние на пользователя оказывают аудиты [user-scalable = ”no”] и [max-scale]?

Прежде всего, мы должны сказать, что каждый проводимый аудит объединяется с другими и создает высокий пользовательский эффект.Этот аудит и ошибки [user-scaleable = ”no”] и [max-scale] имеют незначительное влияние на пользователя. Однако для веб-сайтов, которые часто принимают посетителей с мобильных устройств, очень важно исправить эту ошибку. Таким образом, люди с ослабленным зрением могут легко ознакомиться с сайтом.

Чтобы оптимизировать масштабирование и масштабирование, вы должны сначала понять метатег области просмотра. Элемент области просмотра в исходном коде веб-сайта находится в начале HTML-документа. Он предоставляет браузеру важную информацию: Как должна отображаться страница?

Если хотите, рассмотрим на примере.Например, приведенный ниже фрагмент кода указывает браузеру гибко настраивать размер контента на сайте в соответствии с размером устройства в руке пользователя.

Начальный масштаб метатега видового экрана = 1

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

Масштабирование области просмотра

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

Масштабирование области просмотра

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

Так как же это сделать?

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

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

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

• Наконец, если вы действительно хотите, чтобы пользователь увеличил масштаб вашей веб-страницы, вам следует использовать элемент user-scaleable = yes .Это также настройка по умолчанию. Если вы хотите запретить пользователям изменять масштаб, вы должны использовать элемент user-scalable = no . Ниже мы поделились для вас фрагментом, который позволяет пользователям увеличивать масштаб. Вы можете проверить:

В чем разница между масштабированием и масштабированием?

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

В чем разница между масштабированием и масштабированием?

Скажем сразу : Да, потому что это разные концепции.

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

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

В чем разница между масштабированием и масштабированием?

Подумайте об этом так: : если размер изображения составляет 256 × 256 пикселей, когда пользователь увеличивает масштаб страницы, этот размер не изменяется после масштабирования. Но если вы увеличите это изображение на 25 процентов, размер нового изображения будет 64X64.

Screpy работает в интеграции с такими платформами, как Google Lighthouse и Chrome DevTools.Наша цель - избавить вас от необходимости пытаться работать на разных платформах для каждого из этих типов аудитов. Вместо этого мы гарантируем, что вы можете контролировать все с единой платформы. Именно поэтому отсюда вы можете проводить все аудиты Google Lighthouse от доступности до производительности. Также вы можете узнать, как устранять предупреждения, выдаваемые содержанием нашей задачи. Ознакомьтесь с кратким содержанием задачи, которое мы создали для предупреждений [user-scalable = ”no”] и [maximum-scale].

Проверьте свой веб-сайт, проблемы

Вы можете быстро проанализировать свой сайт

Правильное окно просмотра | документация webhint

meta-viewport предупреждает об отсутствии единого окна просмотра meta
в теге с правильным значением.

Почему это важно?

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

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

Mobile Safari представил «метатег области просмотра», позволяющий веб-
разработчики контролируют размер и масштаб области просмотра.Многие другие мобильные
браузеры теперь поддерживают этот тег.

В последние годы разрешение экрана выросло до
отдельные пиксели трудно различить человеческим глазом.
Например, современные смартфоны обычно имеют 5-дюймовые экраны с
разрешение до 1920–1080 пикселей (~ 400 точек на дюйм). Из-за этого,
многие браузеры могут отображать свои страницы с меньшим физическим размером,
перевод нескольких аппаратных пикселей для каждого «пикселя» CSS. Изначально
это вызвало проблемы с удобством использования и удобочитаемостью на многих оптимизированных для сенсорного экрана
веб-сайты.

Использование метатега области просмотра для управления макетом на мобильных устройствах
(MDN)

Тема, связанная с окном просмотра, очень сложна, поэтому, если вы хотите копать
глубже, прочтите часть Питера-Пола Коха «История двух видовых экранов».
один и второй, или посмотрите его
поговорите "Мобильные окна просмотра".

ПРИМЕЧАНИЕ: Если ваш веб-сайт не отвечает, этот метатег
может не понадобиться.

В идеале следует использовать следующий метатег viewport :

Или, если большинство ваших пользователей не используют Safari для iOS <9:

Примечания:

• Рекомендуется использовать:

  • ширина = ширина устройства

    • device-width заставит страницу соответствовать ширине экрана в
      независимые от устройства пиксели, позволяющие переформатировать его содержимое в
      соответствовать разным размерам экрана.

      Установка свойства width на определенный размер (например: width = 320 )
      не рекомендуется.

    • Наличие width = device-width также составляет производительность
      улучшение, как и в большинстве случаев, позволяет быстро нажимать,
      удаление задержки касания 300–350 мс в Safari для iOS 10+ и других мобильных браузерах.

  • начальная шкала = 1

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

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

  Учитывая описанные проблемы, эти свойства в настоящее время
  игнорируется некоторыми мобильными браузерами, такими как Safari для iOS 10+.

Что проверяет подсказка?

Подсказка проверяет, указан ли метатег viewport как единичный
время в , а если:

• предоставляется свойство width и его значение device-width
• предоставляется свойство начального масштаба (примечание: зависит от
  конфигураций) и его значение
  1 или 1.0
• с возможностью масштабирования пользователем , с максимальным масштабом или с минимальным масштабом используются
• он включает неизвестные свойства (например,g .: x = y ) или недопустимые значения
  ( ширина = x )

Примеры того, что

запускает подсказку

Мета-тег области просмотра не указан в :

 

    
        
        
        ...
    
    
        
    
 

Метатег области просмотра содержит неизвестное свойство:

Мета-тег области просмотра содержит недопустимое значение:

Мета-тег области просмотра содержит запрещенное свойство ( масштабируемое пользователем ):

Метатег viewport содержит фиксированную ширину значение:

Мета-тег viewport содержит начального масштаба со значением
отличается от 1 или 1.0 :

Имеется несколько метатегов области просмотра :

 

    
        
        
        
        ...
        
        ...
    
     ... 
 

Примеры того, что

передает подсказку

Если используются версии Safari для iOS <9:

 

    
        
        
        
        ...
    
    ... 
 

 

    
        
        
        
        ...
    
     ... 
 

Если используются версии Safari для iOS 9+:

 

    
        
        
        
        ...
    
     ... 
 

Можно ли настроить подсказку?

Эта подсказка учитывает целевой
браузеры, а если нет
версии Safari для iOS <9 включены, это не будет требуется начальная шкала = 1 .

Как пользоваться подсказкой?

Этот пакет устанавливается автоматически с помощью webhint:

 npm install hint --save-dev 

Чтобы использовать его, активируйте его через .файл конфигурации hintrc :

 {
    "коннектор": {...},
    "форматировщики": [...],
    "подсказки": {
        "meta-viewport": "ошибка",
        ...
    },
    "парсеры": [...],
    ...
} 

Примечание : Рекомендуемый способ запуска webhint — как devDependency of
ваш проект.

Дополнительная литература

Новые варианты поведения при взаимодействии в iOS 10

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

Быстрое нарезание резьбы

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

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

Для включения быстрого касания в iOS 10 на страницах должно быть следующее:

1. Здесь должен быть метатегом типа viewport
2. Область просмотра должна быть определена как , чтобы ширина = ширина устройства
3. Содержание должно быть в масштабе 1, что означает и то, и другое:
a.пользователь не увеличивал масштаб до 1 вручную (например, он мог увеличить масштаб, но должен был вернуться к исходному масштабу)
b. содержание страницы было не настолько широким, чтобы браузер был вынужден уменьшить его до размера

Примечание. Объясняя 3.b, WebKit часто видит страницы, которые определяют ширину = ширина устройства , но затем явно размещают содержимое с очень большой шириной, часто превышающей 1000 пикселей. Эти сайты обычно разрабатываются для большого экрана и добавили тег области просмотра в надежде, что он будет удобен для мобильных устройств.К сожалению, это не случай. Если бы браузер соблюдал такое вводящее в заблуждение правило области просмотра, как это, пользователь мог бы видеть только верхний левый угол содержимого, что явно неприятно. Вместо этого WebKit ищет этот сценарий и соответствующим образом регулирует коэффициент масштабирования. Концептуально это поведение аналогично тому, как браузер загружает страницу, затем пользователь щелкает пальцем и уменьшает масштаб настолько, чтобы увидеть весь контент, что означает, что страница больше не имеет масштаб 1.

Масштабирование повсюду

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

Что изменилось? До iOS 10 Safari позволяла контенту блокировать масштабирование страницы пользователем, задав user-scaleable = no в области просмотра или соответствующие значения min-scale и max-scale . К сожалению, это позволило страницам выбирать размер текста, который был нечитабелен, но не давал пользователю возможности масштабировать. Кроме того, сейчас существует такой широкий спектр устройств с различными размерами экрана, разрешением экрана, плотностью пикселей … очень сложно выбрать подходящий размер текста в дизайне.

Теперь мы игнорируем настройки , масштабируемые пользователем, , min-scale и max-scale . Если у вас есть контент с отключенным масштабированием, протестируйте его на iOS 10 и поймите, что многие пользователи сейчас будут масштабировать.

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

Масштабирование содержимого WKWebView

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

.

В WKWebView появился новый API Конфигурация:

  var игнорируетViewportScaleLimits: Bool
  

Значение по умолчанию: false , что означает, что содержимое WKWebView позволит содержимому блокировать масштабирование.Это сохраняет поведение со старыми версиями iOS.

Между тем Safari и SafariViewController устанавливают значение true . Если ваше приложение использует WKWebView аналогичным образом, например, показывает большой объем текста, мы рекомендуем вам также изменить значение на , истинное .

Для обратной связи напишите по адресу [email protected] или напишите в Твиттере на @webkit.

Viewport — Learn.co

Описание проблемы

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

Цели

1. Объясните свойство width метатега области просмотра
2. Объясните свойство initial-scale метатега области просмотра

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

Мы достигаем этого, используя метатег области просмотра внутри нашего раздела заголовка html:

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

Если мы снова посмотрим на наш предыдущий пример, атрибут содержимого этого тега будет
установить так, чтобы:

• Ширина нашего окна просмотра должна соответствовать ширине устройства
• Начальный масштаб страницы будет установлен на нормальный масштаб по умолчанию

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

Заключение

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