Как запретить масштабирование сайта html
Перейти к содержимому

Как запретить масштабирование сайта 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

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

Как отключить масштабирование на мобильной веб-странице с помощью 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>

Курсы javascript

Написал приложение на css3, html5 и javascript для тач-экрана под windows 7.
Мешает масштабирование с помощью тач жестов.
Пробовал отменить в IE10, Firefox, Chrome, Opera.
Ничего у меня не получается, они все равно реагируют на жест двумя пальцами уменьшение или увеличение страницы.
Искал события для того чтобы отловить эти жесты, но они то же не ловятся.

Может кто что подскажет начинающему.

С уважением, Анатолий.

19.12.2012, 01:01
Регистрация: 04.02.2011
Сообщений: 1,815

сомневаюсь что можно отловить жесты.

Зато можно отловить изменение размера страницы через resize

window.onresize = function() < //При изменениии масштаба/размера окна браузера var width = document.documentElement.clientWidth; //Ширина экрана var height = document.documentElement.clientHeight; //Высота экрана alert(width); >

1) можно было бы попробывать изменить масштаб браузера обратно, но я хз как это сделать, если и возможно то точно не везде. resizeTo метод вроде есть, впрочем помоему это нето.

2) с другой стороны можно попробывать изменить размер самого html через scale.
http://d3pr5r64n04s3o.cloudfront.net. ml/index8.html

3) есть такая штука window.devicePixelRatio но чо с ней делать на десктопе я хз

  

нужно экспеременитровать однако.

Как запретить масштабирование на веб-сайте?

Допустим, у меня есть такая вёрстка, которая некорректно работает после изменения размера клиентской области. Так вот какими средствами можно запретить эти действия?

  • Вопрос задан более трёх лет назад
  • 56758 просмотров

2 комментария

Оценить 2 комментария

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

webvany

Иван Желудков @webvany Автор вопроса

Да, я упустил деталь. Я имел ввиду увеличение — уменьшение сайта средствами CTRL + скролл. Как это запретить.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *