Что такое ТВ в css

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

Один из способов изменить стили в зависимости от разрешения — использование специальных CSS правил, которые срабатывают при выполнении заданных условий. Такими условиями могут быть:

• Ширина или высота viewport
• Горизонтальная или вертикальная ориентация экрана
• Тип устройства

Правило media

А какие бывают условия? Представим, что нужно изменить цвет текста, если ширина viewport меньше или равно 700 пикселей. Тогда указывается правило max-width: 700px . Очень похоже на обычное CSS правило, которое определит, что свойства должны отрабатывать, если ширина viewport 700 пикселей или меньше:

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

Interactive Tv Set With Pure CSS | CSS Illustration | CSS Speed Art

В медиа запросах есть специальное условие orientation , которое может иметь одно из двух значений:

• portrait — портретная ориентация устройства. Высота экрана больше, чем его ширина
• landscape — альбомная ориентация устройства. Высота экрана меньше, чем его ширина

Пусть для портретной ориентации текст будет белым, а для альбомной чёрным:

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

Задание

Добавьте белый цвет текста у параграфов с классом white-text-mobile для устройств с шириной экрана не больше 750 пикселей. Стили запишите в теге

Упражнение не проходит проверку — что делать?

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет

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

Мой код отличается от решения учителя

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

Flexbox CSS практический курс за 6 минут. Все свойства

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

Прочитал урок — ничего не понятно

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

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

Источник: code-basics.com

Что такое CSS3?

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

Спецификация CSS3 не является частью спецификации HTML5. Эти два стандарта были разработаны отдельно друг от друга, разными людьми, работающими в разное время в различных местах. Но даже организация W3C призывает веб-разработчиков использовать HTML5 и CSS3 вместе, как часть одной новой волны современного веб-дизайна.

Внедрять CSS3 в веб-сайт можно, по большому счету, используя три стратегии:

Стратегия 1: используйте то, что можно

Логично использовать возможности с высоким уровнем поддержки на всех основных браузерах. В качестве примера одной из таких возможностей можно назвать применение веб-шрифтов. Используя шрифты правильного формата, эту функциональность можно заставить работать на таких старых браузерах, как Internet Explorer 6. К сожалению, очень немногие возможности CSS3 входят в эту категорию. Почти все иные возможности не будут работать на все еще популярных браузерах IE 7 и IE 8.

Стратегия 2: рассматривайте возможности CSS3 как усовершенствования

У фанатов CSS3 есть боевой клич: «Веб-сайты не должны выглядеть абсолютно одинаково на всех браузерах».

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

header

Браузеры, поддерживающие свойство border-radius, будут использовать его, a старые браузеры просто игнорировать его, оставляя углы рамок квадратными:

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

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

Что касается поддержки CSS3, Internet Explorer большой слабак в этой области. Существует воинствующее меньшинство веб-дизайнеров, которые считают, что веб-дизайнеры должны игнорировать этот браузер и применять возможности CSS3 как только они начинают поддерживаться другими браузерами. А как иначе оказывать давление на Microsoft и стимулировать усовершенствование Интернета?

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

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

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

-moz-border-bottom-colors: orange red green; -moz-border-left-colors: orange red green; -moz-border-right-colors: orange red green; -moz-border-top-colors: orange red green;

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

header

Результаты применения этого правила показаны на рисунке:

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

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

Одним из способов решения подобных проблем будет использование библиотеки JavaScript — Modernizr, которая проверяет поддержку возможностей HTML5 конкретным браузером.

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

/* Настройки для всех браузеров, независимо от уровня поддержки CSS3 */ header < padding: 10px; margin: 10px; text-align: center; >/* Настройки для браузеров, которые поддерживают свойство border-radius */ .borderradius header < border: thin orange solid; border-radius: 25px; >/* Настройки для браузеров, которые не поддерживают свойство border-radius */ .no-borderradius header

Этот набор правил работает следующим образом. В корневой элемент страницы вставляется атрибут :

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

Наличие в этом списке класса без префикса no- означает, что данный браузер поддерживает соответствующую возможность. Если же класс указан с префиксом, соответствующая возможность в данном браузере не поддерживается. В данном случае пример запущен на последней версии Chrome, поэтому поддерживаются почти все возможности.

Эти классы можно вставить в селекторы таблицы стилей, чтобы отфильтровать настройки стилей в зависимости от предоставляемой поддержки. Например, если данный браузер поддерживает свойство border-radius, селектор .borderradius header получит все элементы внутри корневого элемента . В противном случае класс .borderradius будет отсутствовать, селектор ни с чем не совпадает, и правило не применится.

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

С помощью Modernizr можно также создавать резервные решения на JavaScript. В данном случае нужно просто проверить значение соответствующего свойства объекта Modernizr, как при проверке на поддержку возможностей HTML5. Этот метод можно использовать, чтобы компенсировать отсутствие более продвинутых возможностей CSS3, таких как переходы или анимации. Но для этого требуется так много усилий и настолько разные модели, что для необходимых возможностей веб-сайта обычно лучше всего придерживаться решений только на основе JavaScript.

Стили, специфичные для конкретных браузеров

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

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

Чтобы предотвратить такое развитие событий, разработчики браузеров используют , чтобы изменять названия свойств и функций CSS, пока они еще находятся в процессе разработки. Возьмем, например, новое свойство радиального градиента. Чтобы использовать его в браузере Firefox, нужно установить разработочную версию этого свойства, которое называется -moz-radial-gradient. Префикс разработчика -moz- (сокращение от Mozilla — организации, занимающейся проектом Firefox) обозначает свойство для браузера Firefox.

Для каждого браузера существует собственный префикс разработчика:

Префиксы разработчиков браузеров

Префикс Браузер

-moz-	Firefox
-webkit-	Chrome и Safari (в обоих браузерах используется один и тот же движок визуализации)
-ms-	Internet Explorer
-o-	Opera

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

Поэтому, если вы хотите использовать в своем веб-сайте радиальный градиент уже сегодня, для того чтобы он правильно отображался во всех браузерах (включая Internet Explorer 10), вам нужно использовать раздутое правило CSS наподобие следующего:

header < background: yellow; background: -moz-radial-gradient(ellipse, red, yellow); background: -webkit-radial-gradient(ellipse, red, yellow); background: -ms-radial-gradient(ellipse, red, yellow); background: -o-radial-gradient(ellipse, red, yellow); /* Добавляем общее правило, которое будет срабатывать если браузер уже поддерживает конечную спецификацию CSS3-свойства radial-gradient */ background: radial-gradient(ellipse, red, yellow); >

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

Зачем использовать CSS3 если есть JavaScript и Flash?

Появление некоторых новых возможностей CSS3 не касающихся стилизации элементов страницы (такие как анимации и переходы) вызвали кучу вопросов о их необходимости, ведь таких же эффектов можно добиться использованием JavaScript, либо подключаемых модулей Flash или Silverlight. Давайте рассмотрим преимущества и недостатки каждого подхода:

Источник: professorweb.ru

Тег viewport: как настроить область просмотра в адаптивном дизайне

В статье:

1. Экран и область просмотра в адаптивном дизайне
2. Как работает мета-тег viewport
3. Как и где указывать тег «viewport»

Экран и область просмотра в адаптивном дизайне

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

Для мобильного просмотра веб-мастеры в зависимости от потребностей бизнеса выбирают способ отображения сайта: разрабатывают отдельную мобильную версию, делают адаптивную верстку или динамическую — RESS (Responsive Design + Server Side). Для корректного отображения проекта на разных моделях планшетов и десктопов также нужен адаптив под разные разрешения.

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

• диагональ экрана — размер дисплея в дюймах, измеряется от угла к углу;
• размер экрана в точках — количество точек, их устройство использует для координат;
• полное число пикселей (Rendered Pixels), которое визуализирует устройство. Значение считают с помощью множителя 1x, 2x, 3x, который устройство использует к размеру экрана в точках;
• физические пиксели — фактическое разрешение экрана в пикселях; в экранах Retina, которые используют современные модели техники Apple, более высокое разрешение изображения на экране с меньшим количеством физических пикселей.

К примеру, возьмем смартфоны: у IPhone 3 с диагональю 3.5″ физическое разрешение экрана 320x480px, а плотность пикселей 163ppi. Разрешение соответствует диагонали, плотность пикселей невысокая. Если отобразить на нем текст, набранный размером 16px, он будет читаться так же хорошо, как и на экране компьютера. Модель IPhone 6 Plus с дисплеем Retina использует более высокое разрешение изображения на экране с меньшим количеством физических пикселей, полноэкранное изображение — 1242x2208px.

Из-за высокой плотности пикселей тот же текст, набранный в размере 16px, будет выглядеть на экране IPhone 6 Plus значительно мельче, чем на дисплее IPhone 3 . Чтобы сделать страницу с таким текстом пригодной для чтения, нужно отмасштабировать ее, увеличив в три раза.

Отношение пикселей зависит от плотности дисплея:

• плотность менее 200 DPI (точек на дюйм) — соотношение 1.0;
• от 200 до 300 DPI — 1.5.
• более 300 DPI — соотношение представляет собой плотность/150 точек на дюйм.

Адаптивность есть во всех современных требованиях к PSD-макетам сайта. Пример требований by andrey-hohlov на GitHub.

Как работает мета-тег viewport

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

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

Справа мобилопригодная страница с тегом «viewport», в котором указана область просмотра страницы — она равна ширине экрана. Пользователь не масштабирует страницу и видит контент в удобном для чтения размере, блоки контента смещены так, что горизонтальной прокрутки нет.

Как и где указывать тег «viewport»

Мета-тег «viewport» размещают в блок в таком виде:

Как настроить размер окна просмотра

Атрибут «width»

Атрибут «width» адаптирует ширину окна просмотра к экрану устройства. Указывают либо целое неотрицательное значение от 200px до 10 000px, либо константу «device-width» — она означает, что устройство масштабирует ширину страницы под размер экрана.

Веб-мастер может установить конкретное число пикселей в этом атрибуте, к примеру, width=600. Так делают, если макет должен быть не менее 600px шириной. Если экран окажется больше, браузер не будет увеличивать масштаб, а станет расширять область просмотра, чтобы она растянулась до размеров экрана.

К примеру, на большинстве смартфонов действует стандарт «device-width» в 320px. Если пользователь смотрит сайт с мобильного устройства дисплеем 640px, изображение шириной 320px займет весь экран, используя удвоенное количество пикселей. Поскольку экран использует удвоенную плотность пикселей по сравнению со стандартным монитором, текст на маленьком экране будет казаться четче.

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

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

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

Веб-мастеру будет сложно работать с сайтом, если он задался целью определить контрольные точки на макете для разных классов и моделей устройств. Список размеров экранов мобильных устройств и планшетов насчитывает 286 элементов, вместо этого достаточно вписать относительные величины в процентах. Если для блока верхнего уровня установить параметр «width=100%», на любом устройстве он поместится в экран и не будет слишком маленьким или слишком большим.

div.fullWidth

Как использовать медиазапросы CSS

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

В адаптивном дизайне применяют функции:

• «min-width» — применимо к браузеру, ширина которого больше, чем указано в запросе;
• «max-width» — к браузеру, ширина которого меньше;
• «min-height» — к браузеру, высота которого больше значения, указанного в запросе;
• «max-height» — к браузеру, высота которого меньше.

К примеру, установим значения:

При ширине браузера от 0 до 640px применяется max-640px.css.

При ширине браузера 640px и выше применяется min-640px.css.

Если в браузере ширина больше высоты — горизонтальная ориентация, применяется landscape.css.

Если в браузере высота больше ширины — вертикальная ориентация, применяется portrait.css.

Код для этих значений будет выглядеть так:

Как настроить отображение в зависимости от ориентации дисплея

Атрибут «initial-scale=1»

Некоторые браузеры при изменении ориентации с вертикальной на горизонтальную увеличивают масштаб. Атрибутом «initial-scale=1» указывают браузеру соотношение пикселей CSS и устройства независимо от ориентации дисплея, в соотношении один к одному. В ориентации по горизонтали страница будет выглядеть лучше. Атрибут может иметь значение от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибуты «maximum-scale», «minimum-scale» и «user-scalable»

Кроме настройки «initial-scale» у разработчика есть возможность настроить атрибуты «maximum-scale», «minimum-scale» и «user-scalable». Они ограничивают масштабирование страницы пользователем или вовсе запрещают его.

«maximum-scale» и «minimum-scale» определяют максимальный и минимальный масштаб окна. Могут иметь значения от от 0.1 до 10, 1.0 означает «не масштабировать».

Атрибут «maximum-scale=1» при переключении ориентации оставит настройки масштаба неизменными:

«user-scalable» определяет, может ли пользователь изменять масштаб. Он имеет значение «no» или «yes», по умолчанию стоит «yes».

Свойство «user-scalable» в HTML имеет эквивалент «user-zoom» в CSS:

Дескриптор «orientation»

• auto — ориентация на основе положения устройства;
• landscape — горизонтальная ориентация;
• portrait — вертикальная ориентация.

По умолчанию установлено значение auto.

Медиазапросы и «device-width»

Google в руководстве для веб-мастеров предлагает комбинировать значения «device-width» с медиа-запросами и настраивать макет в зависимости от ориентации устройства:

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

Атрибуты «height» и «device-height»

Если на сайте есть элементы, которые меняют свой размер в зависимости от высоты окна просмотра контента, в мета-теге применяют атрибут «height» — он определяет высоту Viewport. Указывают целое неотрицательное значение «height» от 223px до 10000px или константу «device-height».

Если шаблон неадаптивный

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

Не используйте «user-scalable=no» или «initial-scale=1» вместе с «maximum-scale=1» на неадаптивных шаблонах — это отключит масштабирование страницы, а без него пользователь не сможет увидеть всю страницу сайта.

Если не использовать «viewport»

В теге или правиле «viewport» браузер находит инструкции для масштабирования страницы ресурса, а если его не указать, браузер покажет пользователю стандартный размер десктопной страницы, который обычно составляет 960+px, и попробует оптимизировать содержимое увеличением шрифтов и элементов. Он покажет контент, поместившийся на экране, а пользователю придется масштабировать страницу вручную или использовать горизонтальную прокрутку.

Такие страницы поисковики не будут считать адаптивными, а значит не дадут им высокие позиции в топе. Высокий процент отказов поисковики расценят как сигнал бесполезности сайта. Мобилопригодность важна при ранжировании в Яндексе и Google. В 2016 году в Яндексе появился алгоритм «Владивосток», в 2018 «Андромеда», а Google в 2018 году заявил, что мобильный индекс будет в приоритете и для мобильной, и для десктопной выдачи. На начало 2019 перевод в мобильный индекс еще не завершен до конца.

Поисковики распознают адаптивный дизайн сайта, если у робота будет доступ к ресурсам страницы — CSS, JavaScript и изображениям. Убедитесь, что доступ в файле robots.txt открыт.

Проверить мобилопригодность страницы

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

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

Мета-тег «viewport» не входит в официальные стандарты, но общепризнан, его поддерживают большинство браузеров и используют многие сайты. Работа с этим тегом описана в том числе в документации Apple и в документации Android для разработчиков.

Материалы и руководства для веб-мастеров

Источник: pr-cy.ru