Мета-тег 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
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
как запретить масштабирование сайта при просмотре со смартфона как в мобильнрй версии вк?
Здравствуйте. Как запретить масштабирование сайта при просмотре со смартфона как в мобильнрй версии вк?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как запретить масштабирование сайта при просмотре со смартфона как в мобильнрй версии вк?
Здравствуйте. Как запретить масштабирование сайта при просмотре со смартфона как в мобильнрй версии.
Как запретить масштабирование контролов на форме при изменении dpi экрана?
Всем здравствуйте. Речь об отсутствующем свойстве Scaled у форм студии. (В Delphi эта проблема.
Масштабирование окна. Как запретить?
Как запретить масштабирование окна, создаваемого средствами opengl? glutInitWindowSize (screenW.
Как запретить установку приложения на более ранние версии android?
Свой apk планирую раздавать не только с play.google.com, поэтому фильтровать версии android никто.
87 / 87 / 22
Регистрация: 11.10.2012
Сообщений: 333
1 2 3 4
body{ min-height: 700px; min-width: 700px; }
Хотя не знаю, будет ли это работать для body, но вот для дивов работает отлично.
562 / 339 / 87
Регистрация: 15.05.2013
Сообщений: 812
Записей в блоге: 1
Копайте в сторону meta viewport.
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Здесь параметр user-scalable=no запрещает пользователю масштабировать сайт с мобильного устройства.
Администратор
11995 / 5332 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
MarlboroRed, достаточно указать min-width, высоту указывать не нужно.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Масштабирование сайта как в Acrobat
Если в Adobe Acrobat масштабировать страницу до минимума, двигая правый нижний угол, то страница.
Как убрать авто-масштабирование сайта?
Не могу никак найти,как убрать функцию масштабирования странички при уменьшении размеров браузера,а.
Меню для сайта как в мобильной версии
Добрый день. Обыскал весь интернет, НЕ МОГУ НАЙТИ..Есть ли исходник простого меню на jquery, как.
Как убрать изображения из мобильной версии сайта?
Я решил сделать мобильную версию своего сайта, поэтому в дополнение к файлу «style.css» я создал.
Как запретить стилизовать элементы сайта, iOS
Возможно ли для ios как то запретить проводить свою стилизацию элементов на сайте? К примеру, она.
Как запретить отображение сайта в интернет эксплорере?
Подскажите, пожалуйста, знает ли кто-нибудь: есть ли скрипт, запрещающий отображение сайта во всех.
Как отключить масштабирование на мобильной веб-странице с помощью 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>Как полностью отключить масштабирование сайта?
Как полностью отключить масштабирование сайта? Будь то кнопки ctrl+колесико, или настройки браузера Нужно это из-за бага анимации блока.. При масштабировании страницы блок становится не той формы, которую я задавал. Исправляется это только обновлением страницы. Но если опять масштабировать сайт, эта проблема снова возникнет. В общем не суть Как полностью отключить возможность масштабирования сайта?
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 30 окт 2013 в 13:09
151 3 3 серебряных знака 11 11 бронзовых знаков
написав свой браузер? Я думаю, лучше просто исправить ошибку анимации.
30 окт 2013 в 13:12
@KoVadim эту ошибку, по видимому, невозможно исправить. Попробуйте масштабировать вот этот популярный сайт. Вы увидите неправильные пропорции анимированных элементов на логотипе. Обновите страницу — они станут нормальные. Масштабируйте сайт до нормальных размеров — и опять та же ошибка. daneden.me/animate Если такой сервис не смогу ее исправить, значит решения пока что нет. (в гугле я тоже не обнаружил)
30 окт 2013 в 13:17
в других браузерах анимация на этом сайте вообще не работает нормально. > Если такой сервис не смогу ее исправить, какой то малоизвестный сервис. А если честно, то нормально масштабировала только опера — все по честному, с картинками. А другие браузеры просто увеличивали размер шрифта, а картинку оставляли предыдущих размеров. Может быть Вы наткнулись не на баг, а на, как утверждают браузеропостроители, задокументированную фичу.