Мета-тег viewport
По умолчанию, сайт в мобильных устройствах масштабируется по размеру сайта. Чтобы открывать под исходное разрешение экрана, используется мета тег viewport .
name="viewport" content="width=device-width, initial-scale=1">
Свойство width указывает, под каким размером отображать сайт. Если указать width=600 , то мобильное устройство отобразит сайт в ширину 600 пикселей. Значение device-width означает, что надо отображать сайт под размер текущего мобильного устройства.
В свойстве initial-scale указывается масштаб страницы. Значение 1 означает масштаб 100%.
Первый браузер, который стал использовать мета тег viewport , стал Safari.
Запретить масштабирование в мобильных устройствах
Запретить масштабирование в мобильных устройствах можно через два свойства:
- maximum-scale — максимальный размер масштабирования;
- user-scalable — разрешать масштабирование.
name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
Обновлено: 01 ноября 2020
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
HTML: Viewport
Для корректного отображения разметки HTML браузеры создают специальную копию разметки и вставляют её в «виртуальное окно», которое называется viewport. Зачастую данное окно шире, чем экран текущего устройства. Это сделано для того, чтобы все элементы поместились так, как задумывалось. Данный эффект можно увидеть, если зайти на неадаптированную HTML-страницу с мобильного устройства. В таком случае появляется горизонтальная полоса прокрутки.
Впервые данный метатег появился в браузерах от компании Apple «Safari». До появления мобильных устройств браузер Safari по умолчанию считал, что все страницы в интернете имеют ширину в 980 пикселей, из-за чего на первых версиях iPod и iPhone сайты отображались не полностью, а только первые 320 пикселей по ширине.
Сейчас такая проблема решается указанием ширины сайта для устройств. Наиболее часто используют значение device-width у параметра width , которое устанавливает ширину страницы, равную ширине экрана устройства.
Этим значением браузеру сообщается, что ширина страницы равна ширине устройства, с которого эта страница просматривается.
Сейчас вам может показаться это сложным, но, с изучением CSS, вы полностью поймёте смысл указания viewport . Сейчас важно знать про такой метатег и его основные варианты применения
Стоит обратить внимание, что параметры задаются внутри атрибута content , свойства в котором разделяются запятой.
Основные параметры метатега viewport
- width — ширина сайта. Указывается в пикселях. Возможно использование значения device-width для установки ширины страницы равной ширине устройства.
- height — высота сайта. Указывается в пикселях. Возможно использование значения device-height для установки высоты страницы равной высоте устройства.
- initial-scale — начальный коэффициент масштабирования. Может принимать значение от 0.1 до 10.0. Значение единица масштабирует страницу по умолчанию.
- user-scalable — указывает, может ли пользователь масштабировать страницу, то есть приближать или отдалять её. Принимает значение yes и no
Укажем viewport со следующими характеристиками:
- Ширина: 980px
- Масштаб: 1
- Запрет управления масштабированием. То есть запретить приближать или отдалять контент с помощью жестов или «горячих клавиш»
Для этого создаём метатег и, вначале указываем ширину. Это делается с помощью значения width :
Задать изначальный масштаб поможет значение initial-scale со значением 1.0 . Оно означает, что страница выведется без какого-либо искажения, с теми размерами шрифтов и других элементов, которые были установлены разработчиками.
Последнее — запрет на масштабирование. Для этого добавим user-scalable со значением no
Базовое использование метатега viewport
Задание
Добавьте метатег viewport с шириной экрана 1024, без возможности масштабирования со стороны пользователя
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Как отключить масштабирование на мобильной веб-странице с помощью HTML и CSS?
Функция масштабирования не всегда полезна. Одно из неудобств, с которым сталкиваются и разработчики, и пользователи, относится к масштабированию веб-страниц на мобильных устройствах. Мы поможем решить эту проблему. Можно использовать браузер Surefox для отключения этой функции, но все же страница будет масштабироваться при двойном нажатии на экран. Поэтому попробуйте следующие методы, используя HTML и CSS.
1. Как отключить масштабирование с помощью HTML
Это будет выглядеть следующим образом:
content="width=device-width, user-scalable=no">А теперь попробуем пример:
Пример
html> html> head> title> Отключение масштабирования title> meta meta name="viewport" content="width=device-width, user-scalable=no" /> style> body < width:500px; border: 3px solid #4a91d8; > h1< color: #4a91d8; text-align:center; text-shadow: 1px 3px 2px #000; > p < font-size:18px; padding:5px 0; margin:10px; width:220px; height:320px; border:2px solid #4a91d8; > div::after < content: ""; clear: both; display: table; > p:first-child< float:left; > p:last-child< float:right; > style> head> body> h1> Lorem Ipsum h1> div class="clearfix"> p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. p> p> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. p> div> body> html>Давайте рассмотрим другой пример:
Пример
html> html> head> title> Отключение масштабирования title> meta meta name="viewport" content="width=device-width, user-scalable=no" /> style> body < width:630px; border: 3px solid #4a91d8; height:auto; > h1< color: #4a91d8; text-align:center; text-shadow: 1px 3px 2px #000; > img< border:2px solid black; margin:5px; > div::after < content: ""; clear: both; display: table; > .left< float:left; > .right< float:right; > style> head> body> div> h1> Houses h1> img src="https://cdn.vox-cdn.com/thumbor/RVclEmJ7_fDjExXPmUtHZ2nOeCU=/0x0:3000x2000/1200x800/filters:focal(1260x760:1740x1240)/cdn.vox-cdn.com/uploads/chorus_image/image/60890575/LizKuball_180512_0066_HighRes_Bungalow_Heaven.0.jpg" alt="House 1" width="396" class="left" /> img src="https://www.boutiquehomes.com.au/sites/default/files/400_Montauk%2047%20and%2049%20-%20Greyson%20facade.jpg" alt="House 2" width="196" class="right" /> img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/8B96/production/_105243753_house.jpg" alt="House 3" width="396" class="left"/> img src= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVAFvLYZXJ3xBEFRTnXe60ANdxJVCCisVXdkFzWKwJbCEjKMwxYw" alt="House 1" width="196" height="101" class="right"/> p> strong>Note: strong> Не масштабируется на мобильных устройствах p> div> body> html>Не используйте адаптивный метатег, если ваша веб-страница не разработана таким образом, чтобы была адаптивна и хорошо работала в таком масштабе.
2. Как отключить масштабирование с помощью CSS
Если используйте HTML тег , IOS будет масштабировать страницу, если CSS свойство font-size установлено в значение меньше 16 px:
input[type='text'], input[type='number'], input < font-size: 16px; >Давайте попробуем пример:
Пример
html> html> head> title>Заголовок документа title> style> input < font-size: 16 px; > input:focusfont-size:16px;> style> head> body> form action="getform.php" method="get"> Your Name: input type="text" name="first_name" /> Your Surname: input type="text" name="last_name" /> Enter Your E-Mail: input type="email" name="user_email" /> input type="submit" value="Submit" /> form> body> html>Если используете WP, вам может понадобиться добавить !important после 16px для переопределения оформления по умолчанию.
Можете попробовать следующее:
@media screen and (-webkit-min-device-pixel-ratio:0) < select, textarea, input < font-size: 16px; > > @media screen and (-webkit-min-device-pixel-ratio:0) < select:focus, textarea:focus, input:focus < font-size: 16px; > >Давайте посмотрим пример:
Пример
html> html> head> title>Заголовок документа title> style> input < font-size: 16 px; > input:focusfont-size:16px;> @media screen and (-webkit-min-device-pixel-ratio:0) < select, textarea, input < font-size: 16px; > > @media screen and (-webkit-min-device-pixel-ratio:0) < select:focus, textarea:focus, input:focus < font-size: 16px; > > style> head> body> form action="getform.php" method="get"> Your Name: input type="text" name="first_name" /> Your Surname: input type="text" name="last_name" /> Enter Your E-Mail: input type="email" name="user_email" /> input type="submit" value="Submit" /> form> body> html>Как запретить масштабирование на веб-сайте?
Допустим, у меня есть такая вёрстка, которая некорректно работает после изменения размера клиентской области. Так вот какими средствами можно запретить эти действия?
- Вопрос задан более трёх лет назад
- 55158 просмотров
2 комментария
Оценить 2 комментария
В моем понимании — масштабирование — это изменение масштаба страницы. А изменение клиентской области — это изменение клиентской области.
Поясните, пожалуйста. вопрос.
Вот например, человек открыл Ваш сайт в браузере и хочет развернуть его на весь экран, или включить полноэкранный режим — вы хотите это ему запретить? А простите — какая вероятность, что только открыв сайт, он попадет именно в тот размер клиентской области, который нужен Вам?
В общем, странный вопрос, нужны более внятные пояснения.
Иван Желудков @webvany Автор вопроса
Да, я упустил деталь. Я имел ввиду увеличение — уменьшение сайта средствами CTRL + скролл. Как это запретить.