Как запретить масштабирование в браузере
Обновлено: 07.07.2024
При выборе чего-либо из этого списка iPhone приближает select элемент -элемент. И не уменьшает масштаб после выбора чего-либо.
Как я могу предотвратить это? Или уменьшить масштаб?
Вероятно, это связано с тем, что браузер пытается увеличить область, поскольку размер шрифта меньше порогового значения, обычно это происходит на iphone.
Присвоение атрибута метатега «user-scalable = no» ограничивает возможность масштабирования в другом месте. Поскольку проблема заключается только в элементе select , попробуйте использовать в своем CSS следующее, этот хак изначально использовался для jquery mobile.
Если текст виден (как в моем случае), кажется, что 16 пикселей - это минимум, прежде чем он включит масштабирование. Чтобы было понятнее, эта строка предотвратит автомасштабирование: $('<meta>',user-scaleable = no - это то, что вам нужно, так что на этот вопрос есть окончательный ответ
На самом деле, добавления width = device-width, initial-scale = 1.0, maximum-scale = 1.0 должно быть достаточно. Я не верю, что вам нужна масштабируемость пользователя с максимальным масштабом. @DanSmart, по крайней мере, в моем случае (и я не знаю, что его отличает), минимального / максимального масштаба было недостаточно - добавление user-scaleable = no имело значение. Это кажется очень жестким подходом - я рекомендую с осторожностью использовать user-scaleable = no. От Dev.Opera : «Также можно полностью отключить масштабирование, однако имейте в виду, что масштабирование является важной функцией доступности, которая используется многими людьми. Поэтому отключение этого должно происходить только тогда, когда это действительно необходимо, например, для определенные типы игр и приложений ". Если размер шрифта превышает 16 пикселей, браузер может уменьшить масштаб при фокусировке ввода. Мне нужно было только добавить minimum-scale=1 , что также сохраняет возможность масштабирования пользователя.В моем случае это сработало при решении этой проблемы:
В моем случае IOS 7x старого масштабируемого пользователем было недостаточно. Вышеупомянутое помогло, спасибо, что поделились.iPhone будет немного увеличивать поля формы, если размер текста меньше 16 пикселей . Я бы предложил установить текст поля мобильной формы на 16 пикселей, а затем переопределить размер обратно для рабочего стола.
Ответы об отключении масштабирования бесполезны для слабовидящих пользователей, которые все еще могут захотеть увеличить масштаб на небольших мобильных устройствах.
Это хорошо! Но что, если мой текст выходит за всю ширину поля выбора? Что мне делать в таком случае? Этот ответ работает и, кажется, предлагает наименее навязчивый метод. Благодаря!Я немного опоздал на вечеринку, но я нашел довольно изящный обходной путь, который решает эту проблему только с помощью манипуляций css. В моем случае я не мог изменить размер шрифта по причинам дизайна, а также не мог отключить масштабирование.
Поскольку iPhone будет немного увеличивать поля формы, если размер текста меньше 16 пикселей, мы можем обмануть iPhone, чтобы он подумал, что размер шрифта составляет 16 пикселей, а затем преобразовать его в наш размер.
Например, давайте возьмем пример, когда наш текст имеет размер 14 пикселей, поэтому он увеличивается, потому что он меньше 16 пикселей. Следовательно, мы можем преобразовать масштаб согласно 0,875.
В следующем примере я добавил отступ, чтобы показать, как соответствующим образом преобразовать другие свойства.
Я надеюсь, что это помогает!
Это неприятный, но также умный хакер, и я не люблю хаки . но в данном случае это лучший ответ на этой странице, и нет альтернативы, если вам нужно остановить масштабирование, но все же вы хотите сохранить дизайн, как есть . Большое спасибо! :)DisablePinchZoom будет запущен перед onchange, поэтому масштабирование будет отключено во время запуска onchange. На функции onchange в конце вы можете восстановить исходную ситуацию.
Я создаю мобильную веб-страницу, которая в основном представляет собой большую форму с несколькими текстовыми вводами.
Однако (по крайней мере, на моем мобильном телефоне Android) каждый раз, когда я нажимаю на какой-то ввод, вся страница масштабируется там, затеняя остальную часть страницы. Есть ли какая-нибудь команда HTML или CSS, чтобы отключить этот вид масштабирования на веб-страницах moble?
ОТВЕТЫ
Ответ 1
Это должно быть все, что вам нужно
Ответ 2
Для тех из вас, кто опаздывает на вечеринку, ответ kgutteridge не работает для меня, а ответ Бенни Нойгебауэра включает функцию target-densitydpi (которая устарела).
Это, однако, работает для меня:
Ответ 3
Здесь есть несколько подходов, и хотя позиция заключается в том, что обычно пользователи не должны быть ограничены, когда дело доходит до масштабирования для целей доступности, могут быть случаи, когда это необходимо:
Отобразить страницу по ширине устройства, не масштабировать:
Предотвращение масштабирования и предотвращение возможности масштабирования пользователя:
Удаление всех масштабирования, все масштабирование
Ответ 4
Вы можете использовать:
Но учтите, что с Android 4.4 свойство target-densitydpi больше не поддерживается. Поэтому для Android 4.4 и более поздних версий в качестве наилучшей практики предлагается следующее:
Ответ 5
Поскольку до сих пор нет решения для первоначальной проблемы, здесь мой чистый CSS два цента.
Мобильные браузеры (большинство из них) требуют, чтобы размер шрифта во входных данных был 16px. Так
Ответ 6
пожалуйста, попробуйте добавить этот метатег и стиль
Ответ 7
Вы можете выполнить задачу, просто добавив в свой "head" следующий элемент "meta":
Добавление всех атрибутов, таких как "ширина", "начальная шкала", "максимальная ширина", "максимальная шкала", может не работать. Поэтому просто добавьте элемент выше.
Ответ 8
какой-либо метатег просмотра viewview не будет работать .i в этом случае вы можете добавить этот script
Ответ 9
Возможное решение для веб-приложений: хотя масштабирование больше нельзя отключить в iOS Safari, оно будет отключено при открытии сайта с помощью ярлыка на главном экране.
Добавьте эти метатеги, чтобы объявить ваше приложение "способным к веб-приложению":
Однако только использовать эту функцию, если ваше приложение самообеспечивающееся, как/назад кнопки и адресной строке вперед как хорошо, как варианты обмена отключены. (Вы все еще можете провести пальцем влево и вправо, хотя) Этот подход, однако, позволяет довольно приложение, как UX. Полноэкранный браузер запускается только тогда, когда сайт загружается с домашнего экрана. Я также получил его на работу только после того, как я включил apple-touch-icon-180x180.jpg в мою корневую папку.
Я создаю мобильную веб-страницу, которая представляет собой большую форму с несколькими текстовыми вводами.
Однако (по крайней мере, на моем мобильном телефоне Android), каждый раз, когда я нажимаю на какой-либо ввод, вся страница там увеличивается, скрывая остальную часть страницы. Есть ли какая-нибудь команда HTML или CSS, чтобы отключить этот вид масштабирования на мобильных веб-страницах?
Как сказал выше Грег, если я захожу на мобильный сайт, который отключает масштабирование, первое, что я обычно делаю, - нажимаю кнопку «назад» (если это не то, что мне действительно нужно просматривать), и я уверен, что я не единственный , Кроме того, исходя из моего опыта, большинство сайтов, на которых отключено масштабирование, также используют мелкие шрифты, что в результате делает чтение текста трудным и очень неудобным. Я согласен, что он не должен быть отключен для большинства сайтов, но есть некоторые случаи использования, когда вы можете отключить масштабирование по умолчанию - например, мобильные веб-игры, где вы можете изменить масштабирование, чтобы сделать что-то еще. Вы не . Если пользователи хотят увеличить, то пусть они делают это. Кроме того: Chrome имеет возможность просто игнорировать ваш запрос. Для пользователей Android Firefox есть дополнение Always Zoom для Firefox . Настоятельно рекомендуется. С прошивкой 10 , user-scalable=no игнорируется. Смотрите этоЭто должно быть все, что вам нужно
это также отключает возможность масштабирования пользователя в целом, а также возможность браузера автоматически настраивать то, как страница вписывается в область просмотра - все, что ищет Мартин, - это способ отключить «увеличение при нажатии». поведение. Прямо сейчас кто-то в Posterous сделал именно это, имея шрифт в 12px, поэтому он не читается, и я не могу найти способ обойти это. Каждый слабовидящий человек, включая меня, ненавидит это больше всего на свете. Я должен взять скриншоты страниц, которые делают это, а затем увеличить их в средстве просмотра изображений. Что делает второй метатег? Разве width=device-width уже нет в первом метатеге?Для тех из вас, кто опаздывает на вечеринку, ответ kgutteridge не работает для меня, и ответ Benny Neugebauer включает target-densitydpi ( функция, которая не рекомендуется ).
Это, однако, работает для меня:
Это правильный ответ сейчас. Другие ответы больше не работают (по крайней мере, для iOS 7). Кто-нибудь пробовал это на iOS 10.x Не думаю, что это работает? Не работает для меня Он изменил размеры всего экрана с полосой прокрутки и плохим масштабированием. Все еще не работает над Safari / iOS 11 из-за проблемы SFB в Apple.Здесь есть ряд подходов - и хотя позиция такова, что обычно пользователи не должны быть ограничены, когда дело доходит до масштабирования в целях доступности, могут быть случаи, когда это требуется:
Рендеринг страницы по ширине устройства, не масштабировать:
Запретить масштабирование и запретить пользователю возможность масштабирования:
Снятие всего масштабирования, все масштабирование
«Обычно пользователи не должны быть ограничены», но при разработке веб-приложений для мобильных устройств вам часто приходится сталкиваться с «фокусом на вводе». Я считаю полезным отключить масштабирование в этом случае.Ты можешь использовать:
Но, пожалуйста, обратите внимание, что с Android 4.4 свойство target-densitydpi больше не поддерживается . Так что для Android 4.4 и более поздних версий рекомендуется использовать следующее:
Поскольку до сих пор нет решения для первоначальной проблемы, вот мои два чистых CSS-цента.
Мобильные браузеры (большинство из них) требуют, чтобы размер шрифта во входных данных был 16px. Так
решает проблему. Таким образом, вам не нужно отключать масштабирование и потерять специальные возможности вашего сайта.
Если ваш базовый размер шрифта не равен 16px или не равен 16px на мобильных устройствах, вы можете использовать медиазапросы.
Почему у этого решения так мало голосов? На сегодняшний день это лучший способ избежать масштабирования при щелчке по форме. Да; это решило и мою проблему! Я не хотел полностью отключать масштабирование, и это было как раз то, что мне было нужно. Вы также можете установить font-size: 1rem для всей страницы, чтобы шрифт хорошо масштабировался, одновременно избегая проблемы "focus-on-zoom".пожалуйста, попробуйте добавить этот метатег и стиль
@ rahulroy9202 у меня touch-action: manipulation; сработало нормально. touch-action: none; ничего не делалПохоже, что просто добавление метатегов в index.html не препятствует масштабированию страницы. Добавление стиля ниже сделает волшебство.
Это должно быть принято исправление, также работает на мобильном сафари ios13 atmВозможное решение для веб-приложений: хотя масштабирование больше нельзя отключить в iOS Safari, оно будет отключено при открытии сайта с помощью ярлыка главного экрана.
Добавьте эти метатеги, чтобы объявить ваше приложение «способным к веб-приложению»:
Однако только использовать эту функцию , если ваше приложение самообеспечивающийся, как вперед / назад кнопку и URL бар Aswell как варианты обмена отключены. (Вы все еще можете провести пальцем влево и вправо, хотя) Этот подход, однако, позволяет использовать такое приложение, как ux. Полноэкранный браузер запускается только тогда, когда сайт загружается с домашнего экрана.Я также получил его на работу только после того, как я включил apple-touch-icon-180x180.jpg в мою корневую папку.
Я хочу , чтобы отключить в два раз водопроводного масштабирования функциональности на указанных элементах в браузере (на сенсорных устройствах), не отключая все функциональные возможности масштабирования .
Например: один элемент можно коснуться несколько раз, чтобы что-то произошло. Это отлично работает в браузерах настольных компьютеров (как и ожидалось), но в браузерах сенсорных устройств масштабирование будет увеличиваться.
Хотя не для масштабирования, но вот еще несколько важных: `-webkit-touch-callout: none; -webkit-text-size-adjust: нет; -webkit-user-select: нет;Только CSS решение
Добавьте touch-action: manipulation к любому элементу, для которого вы хотите отключить масштабирование двойным касанием, как в следующем disable-dbl-tap-zoom классе:
Из touch-action документов (выделено мной):
манипуляция
Включите жесты панорамирования и масштабирования, но отключите дополнительные нестандартные жесты, такие как двойное касание для масштабирования .
Это значение работает на Android и iOS.
@SergoPasoevi, вы можете создать пример, который не работает? Я использую это решение для iOS 12, и оно у меня работает. Я вижу ту же проблему, что и @SergoPasoevi, не работает на iOS 12 каковы минусы обертывания всего тела сенсорным действием: манипуляция? Не работает на последней версии iOS при двойном нажатии на изображение.Я использовал это совсем недавно, и он отлично работает на iPad. Не тестировалось на Android или других устройствах (потому что веб-сайт будет отображаться только на iPad).
Это отключит ВСЕ функции масштабирования, к сожалению, это был не мой вопрос. Я хочу отключить только указанные элементы. @WouterKonecny Если вы удалите проверку агента пользователя, он должен работать на любом устройстве, поддерживающем событие touchstart. Для того, чтобы обнаружить те устройства , которые вы можете использовать что - то вроде isEventSupportedЯ знаю, что это может быть старый, но я нашел решение, которое отлично сработало для меня. Нет необходимости в сумасшедших метатегах и остановке масштабирования контента.
Я не на 100% уверен, насколько это кросс-девайс , но это сработало именно так, как я хотел.
Это просто отключит обычную функцию нажатия, а затем снова вызовет стандартное событие щелчка. Это предотвращает масштабирование мобильного устройства, но в остальном работает как обычно.
РЕДАКТИРОВАТЬ: теперь это проверено временем и работает в паре живых приложений. Кажется, на 100% кроссбраузерность и платформа. Приведенный выше код должен работать как решение для копирования и вставки в большинстве случаев, если вы не хотите настраивать поведение перед событием щелчка.
простой, но отличный ответ. нет необходимости изменять метатеги и т. д. это отключает клики, я не думаю, что это хорошее решение, извините для этого вам не нужен JS, вы можете просто установить атрибут CSS pointer-events: none Спасибо, это отлично сработало для обработки кнопок увеличения / уменьшения без отключения масштабирования всей страницы. Если я вижу это правильно, это может привести к сбою в определенных ситуациях, когда вам нужны доверенные события (например, щелчок по sth, который запускает полноэкранный режим или другие эксперименты, как yneed доверенные события, что означает TRIGGERED BY USER / OS)Я просто хотел правильно ответить на свой вопрос, так как некоторые люди не читают комментарии под ответом. Итак, вот оно:
Похоже, это не работает, по крайней мере, не на SIII (с Android 4.0.4). Я пробовал привязать к документу, телу, окну, *, без кубика. Пробовал и меня, работает на Safari / iPad, Android Chrome, но не с браузером по умолчанию для Android jquery - это не javascript, было бы неплохо получить пример того, как это сделать без библиотеки, Опять же, jQuery не является javascript, и его не следует поощрять, поскольку он не работает с сайтами, основанными на более современных идеях, таких как angular. прочитайте вопросCSS для глобального отключения масштабирования двойным касанием (для любого элемента):
Это должно быть отмечено ответом. Я пробовал поставить его только на html и body, но в iOS 13.2 это не сработало. Это работает. Это не работает на iOS 13 само по себе, но в сочетании с этим кодом оно полностью блокирует касание для масштабирования приложения React. document.getElementById('root').addEventListener('click', () => <>) яблоко отключил тап для увеличения на ios13, как можно сказать, что он не работает на iOS13?манипуляция
Включите жесты панорамирования и масштабирования, но отключите дополнительные нестандартные жесты, такие как двойное касание для масштабирования.
Если вам нужна версия , которая работает без JQuery , я изменил ответ Wouter Конечны (который также был создан путем модификации этого суть по Johan Сундстрём ) использовать ванильный JavaScript.
Затем добавьте обработчик событий, touchstart который вызывает эту функцию:
блестящий. просто хотел упомянуть, что мне нужно было добавить addEventListener, чтобы вызвать это. myButton.addEventListener('touchstart', preventZoom); Это работает . но что, если я хочу отключить масштабирование, но оставить другие события касания? У меня большая таблица, и это тоже отключает прокрутку. Я думаю, вы можете просто добавить его к любому элементу, который вы не хотите использовать для увеличения. Например, в моем случае я не хотел, чтобы пользователь увеличивал какую-либо часть моей страницы, поэтому я добавил это в тег body.Отключите двойное касание для увеличения на сенсорных экранах. Internet Explorer включен.
Простое поведение по умолчанию click , dblclick или touchend события отключить функции масштабирования.
Если у вас уже есть обратный вызов для одного из этих событий, просто вызовите event.preventDefault() .
Это сработало для меня. Я определял собственное событие touchstart для кнопки и хотел отключить функцию масштабирования.Если кто-то вроде меня сталкивается с этой проблемой при использовании Vue.js , простое добавление .prevent поможет: @click.prevent="someAction"
Это предотвратит двойное нажатие на элементы в «теле», это можно изменить на любой другой селектор.
Но это также предотвратило срабатывание моего события щелчка при многократном щелчке, поэтому мне пришлось привязать другое событие, чтобы запускать события при нескольких щелчках
При сенсорном запуске я добавил код для предотвращения увеличения и запуска щелчка.
Я предполагаю, что у меня есть <div> область контейнера ввода с текстом, ползунками и кнопками в ней, и я хочу предотвратить случайное двойное касание в ней <div> . Следующее не запрещает масштабирование области ввода и не относится к двойному касанию и масштабированию за пределами моего <div> области. Существуют вариации в зависимости от приложения браузера.
Я только что попробовал.
(1) Для Safari на iOS и Chrome на Android - предпочтительный метод. Работает за исключением интернет-приложения на Samsung, где двойные нажатия отключаются не полностью <div> , а по крайней мере на элементах, обрабатывающих нажатия. Она возвращает return false , с исключением на text и range входов.
(2) Дополнительно для встроенного интернет-приложения на Android (5.1, Samsung) запрещает двойное касание <div> , но запрещает масштабирование <div> :
(3) Для Chrome на Android 5.1 вообще отключает двойное касание, не запрещает масштабирование и ничего не делает с двойным касанием в других браузерах. Запрет двойного касания <meta name="viewport" . > раздражает, потому что <meta name="viewport" . > кажется хорошей практикой.
Читайте также: