Как отключить масштабирование на мобильной веб-странице с помощью 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>Запретить зум и оверскроллинг в мобильном Safari
Как отключить зум и оверскролинг в Safari под iOS в браузере и WebView? Если посоветуете какой-то готовый плагин для этого под React, будет ещё лучше.
Отслеживать
задан 3 сен 2018 в 21:41
Suvitruf — Andrei Apanasik Suvitruf — Andrei Apanasik
32.2k 15 15 золотых знаков 61 61 серебряный знак 93 93 бронзовых знака
(крайне странно, что Safari этого не умеет, ибо meta viewport впервые появился именно в Safari именно под iOS)
3 сен 2018 в 22:53
@andreymal в 10 iOS они это поменяли.
3 сен 2018 в 23:09
А вы не интересовались почему Эппл запретил такое? Если вы делаете не игру в браузере, то вы не должны хотеть запрещать пользователям зум — это антипаттерн разработки. Есть множество людей (я в их числе), которые активно пользуются зумом на мобиле, потому что имеют не очень хорошее зрение. И, например, мобильная версия Фейсбука, в котором запрещено зумить, вызывает не радость, что всё всегда красиво, а только раздражение.
Как выключить увеличение масштаба в Chrome?
Стоит масштаб 100%, но хром все равно показывает страницы немного увеличенными, как будто на 110% или 125%. Я знаю, что такое еще есть в Firefox, но он не основной браузер, так что там не волнует.
Появилось после последнего обновления.
- Вопрос задан более трёх лет назад
- 7898 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Владимир Ионенко @ionenkovladimir
Для того чтобы отключить масштабирование у приложения необходимо на ярлык кликнуть правой кнопкой мыши, свойства — выбрать совместимость, там есть пункт отключить масштабирование изображение.
Есть еще вариант того, что у Вас стоит масштабирование в самой ОС, для того чтобы убрать, на рабочем столе правая кнопка мыши — параметры экрана , там увидите масштабирование.
Ответ написан более трёх лет назад
Изменяем масштаб страницы в браузере Opera
У каждого пользователя свои индивидуальные потребности, и это касается даже интерфейса браузера. И некоторым стандартного масштаба страницы бывает недостаточно. Предположим, людям с проблемами со зрением предпочтительнее более увеличенные элементы. Есть даже те, которые предпочитают умещать на экране максимум полезной информации. Я расскажу о том, какими способами можно изменить масштаб страницы в браузере Opera.
Изменение масштаба всех страниц
В первую очередь можно попробовать увеличить масштаб всех страниц, и для этого нужно войти в «Настройки». Нажимаю на кнопку меню с изображением буквы О, затем в списке выбираю нужный мне пункт. Еще один способ открыть этот раздел – нажать на комбинацию клавиш Alt + P.
Перехожу к «Настройкам» через меню браузера или нажатием на комбинацию клавиш
К дополнительным параметрам переходить даже не придется, нужный пункт расположен в основной категории, подразделе «Оформление». Выбираю в списке рядом нужную мне отметку масштаба, после чего она автоматически применится ко всем страницам.
Нахожу нужное мне значение в списке и выбираю его
Изменение масштаба отдельной страницы
Бывают случаи, когда на всех сайтах информация отображается нормально, а на одном единственном сайте либо шрифт маленький, либо некоторые элементы. В этом случае можно просто увеличить шрифт именно для этого сайта. Снова открываю меню нажатием на иконку с буквой О и нахожу пункт «Масштаб». Там просто задаю нужное мне значение, в случае чего его можно будет вернуть обратно или даже сбросить.
Этим способом можно увеличить масштаб только конкретной страницы, которая открыта у пользователя на данный момент.
Другой способ – задействовать компьютерную мышь и клавиатуру. Просто нажимаю на клавишу Ctrl и кручу колесико до тех пор, пока не будет достигнут требуемый размер. Еще вместо ролика мыши можно использовать клавиши + (плюс) и — (минус). Смотрите также: Горячие клавиши в браузере Opera
Менять масштаб одной страницы возможно также с помощью компьютерной мыши и клавиатуры
Изменение размера шрифта
Другое дело, когда элементы на всех страницах имеют оптимальный размер, а шрифт достаточно мал, и разглядеть ничего толком не удается. Действовать тут придется методом, аналогичным первому – перехожу в «Настройки» и в том же подразделе просто нахожу пункт «Размер шрифта». По умолчанию установлен средний, его можно поменять на любой другой, который и станет наиболее оптимальным.
При необходимости можно просто увеличить шрифт в браузере
Этим способом можно увеличить шрифт не только для контента на сайте, но и параметров браузера. Если перейти к пункту «Настроить шрифты», то можно будет более детально разглядеть результат увеличения без перехода на ту или иную страницу.
Вот так выглядит более детальная настройка шрифтов в браузере.
Заключение
Практически во всех браузерах предусмотрена возможность настройки интерфейса под потребности пользователя. В Opera реализованы достаточно простые способы доступа к ним, и сориентироваться в них сможет любой желающий, даже новичок. Причем есть возможность изменения вида как на всех страницах, так и на отдельных сайтах. Все зависит от отображаемого контента и требований самого пользователя.