Iphone zooms in on input

Prevent iPhone from zooming form? [duplicate]

When I touch select , the iPhone zooms in that element (and does not zoom out after deselecting).

How can I prevent this? Or zoom back out? I can’t use user-scalable=no because I actually need that functionality. It’s for iPhone, select menu.

12 Answers 12

This can be prevented by setting font-size:16px to all input fields.

UPDATE: This method no longer works on iOS 10.

It depend from the Viewport, you can disable it in this way:

add user-scalable=0 and it should work on your inputs as well.

For iOS, you can avoid zooming of input elements by simply allocating a font size to them that’s considered sufficient by the OS (>=16px), thus avoiding the need to zoom, e.g.:

It’s a solution also utilized by various frameworks and allows you to avoid the use of a meta tag.

This might be helpful to look at:

You’d basically need to capture the event of tapping on a form element, then not run the default iOS action of zooming in, but still allowing it to zoom for the rest of the page.

The link mentions,

2) You can dynamically change the META viewport tag using javascript (see Enable/disable zoom on iPhone safari with Javascript?)

1. Viewport meta tag is set to allow zooming
2. User taps on form element, changes meta tag to disable zooming
3. Upon pressing done, viewport is changed to allow zoom

And if you can’t change the tag when clicking on a form element, put a div that mimics the form element that when you press it, it changes the tag, then calls the input.

The most up voted answer to set the font-size does not work for me. Using javascript to identify the client together with the meta tags in the answers here, we can prevent the zooming behavior of iPhone on input focus while otherwise keeping the zooming functionality intact.

It seems like we have to replace the meta tag with new values on the blur-event, just to remove it does not seem to trigger an updated behavior.

Note that the UI is still initializing the zoom, but it quickly zooms back out again. I believe this is acceptable and iPhone users must already be accustomed to that the browser is having some dynamic zooming going on anyway in applicable scenarios.

Источник

Prevent iPhone from zooming in on `select` in web-app

I’ve got this code:

Running in a full-screen web-app on iPhone.

When selecting something from this list, the iPhone zooms in on the select -element. And doesn’t zoom back out after selecting something.

How can I prevent this? Or zoom back out?

12 Answers 12

It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.

Giving a metatag attribute «user-scalable=no» will restrict the user from zooming elsewhere. Since the problem is with select element only, try using the following in your css, this hack is originally used for jquery mobile.

user-scalable=no is what you need, just so there’s actually a definitive answer to this question

This seemed to work for my case in addressing this issue:

iPhone’s will zoom form fields slightly if the text is set to less than 16 pixels. I’d suggest setting the mobile form field’s text to be 16 pixels and then override the size back down for desktop.

The answers saying to disable zoom are unhelpful for accessibility / partially sighted users may still want to zoom on smaller mobiles.

I am a bit late to the party, but I found a pretty neat workaround that solves this issue only with css manipulation. In my case I couldn’t change the font size due to design reasons, and I couldn’t disable zooming as well.

Since iPhone’s will zoom form fields slightly if the text is set to less than 16 pixels, we can trick the iPhone to think that the font size is 16px and then transform it to our size.

For example, lets take the example when our text is 14px, so it does zoom because it is smaller than 16px. Therefore we can transform the scale, according to 0.875.

In the following example I’ve added the padding to show how to convert other properties accordingly.

Источник

How to stop zoom in on input focus on mobile devices

It has been almost a year since Safari (starting from iOS 10) disabled web developers’ ability to prevent user zoom.

We usually the viewport meta for granted.

This solution was a bulletproof solution to make our mobile-responsive pages look the same in all mobile browsers. At the same time, we ignored that many users struggled to read our hand-picked crafted fonts, and our 4K display supported font size.

We had one more problem when users tap in any form fields — the webpage zoom in automatically.

I know for a fact that allowing this feature to stay unchanged is recommended. Sometimes we do require to honor the client request, and this zoom creates unwanted bugs in the user interface.

For example — a date picker input — if zoomed in mobile — would most likely break the layout and subsequent interface.

Solution

By default, all mobile browsers force the form element to work as it is. But when a developer sets the font size less than 16 pixels on any form element — mobile browsers intervene and force the UI or Page to zoom so that the texts are readable enough.

You guessed it, the solution.

Please note, you can set any value for the max-width property as per your style guide or UI design.

Same, the font-size: 16px might be overridden by other higher specificity rules, like other classes, selectors, etc.

It is a good idea to use !important just in this case. You are restraining the selector only for mobile that means it won’t break your layout and elements display.

Источник

Отключить функцию автоматического увеличения ввода «Текст» — Safari на iPhone

Я сделал HTML-страницу с тегом type=»text» . Когда я нажимаю на него с помощью Safari на iPhone, страница становится больше (автоматическое увеличение). Кто-нибудь знает, как это отключить?

Браузер будет изменять масштаб, если размер шрифта меньше, чем 16px размер шрифта по умолчанию для элементов формы 11px (по крайней мере, в Chrome и Safari).

Кроме того, select элемент должен иметь присоединенный focus псевдокласс.

Не обязательно использовать все выше, вы можете просто стиль элементы вам нужно, например: просто text , number и textarea :

Альтернативное решение, чтобы входные элементы наследовали от родительского стиля:

Вы можете запретить Safari автоматически увеличивать текстовые поля во время ввода данных пользователем, не отключая возможности пользователя увеличивать масштаб. Просто добавьте, maximum-scale=1 но не указывайте атрибут пользовательского масштаба, предложенный в других ответах.

Это полезный вариант, если у вас есть форма в слое, которая «плавает» при увеличении, что может привести к тому, что важные элементы пользовательского интерфейса переместятся за пределы экрана.

Новое: IOS все равно будет масштабироваться, если вы не используете 16px на входе без фокуса.

Я добавил фон, так как IOS не добавляет фон на выбор.

Если ваш сайт предназначен для мобильных устройств, вы можете решить не разрешать масштабирование.

Это решает проблему, с которой ваша мобильная страница или форма будут «плавать» вокруг.

В итоге ответ таков: установите размер шрифта элементов формы не менее 16 пикселей

Правильный способ исправить эту проблему — изменить окно просмотра мета на:

Там нет чистого способа я мог бы найти, но вот взломать .

1) Я заметил, что событие наведения мыши происходит до масштабирования, но масштабирование происходит до событий mousedown или focus.

2) Вы можете динамически изменять тег окна просмотра META, используя javascript (см. Включить / отключить увеличение iPhone Safari с помощью Javascript? )

Итак, попробуйте это (показано в jquery для компактности):

Это определенно хак . могут быть ситуации, когда при наведении / выключении мыши не всегда перехватываются входы / выходы, но это хорошо сработало в моих тестах и ​​является хорошим началом.

Добавьте пользовательский масштабируемый = 0 к мета области просмотра следующим образом

Работал для меня 🙂

Мне недавно (сегодня: D) пришлось интегрировать это поведение. Чтобы не влиять на исходные поля дизайна, включая поля со списком, я решил применить преобразование в фокусе поля:

Мы можем использовать JavaScript для динамического добавления maximum-scale в мету, viewport когда устройством является iOS. Это обеспечивает лучшее из обоих миров: мы позволяем пользователю увеличивать масштаб и не позволяем iOS масштабировать текстовые поля в фокусе.

Взлом Javascript, который работает на iOS 7. Это основано на ответе @dlo, но события mouseover и mouseout заменяются событиями touchstart и touchend. По сути, этот сценарий добавляет тайм-аут на полсекунды, прежде чем зум снова включится, чтобы предотвратить увеличение.

Это сработало для меня:

Я использовал решение Кристины выше, но с небольшой модификацией для начальной загрузки и другим правилом, применимым к настольным компьютерам. Размер шрифта по умолчанию в Bootstrap составляет 14 пикселей, что вызывает увеличение. Следующее изменяет его на 16px для «элементов управления форм» в Bootstrap, предотвращая масштабирование.

И вернемся к 14px для не мобильных браузеров.

Я попытался использовать .form-control: focus, который оставил его на 14px, кроме фокуса, который изменил его на 16px, и это не решило проблему масштабирования с iOS8. По крайней мере, на моем iPhone, использующем iOS8, размер шрифта должен быть 16px перед фокусировкой, чтобы iPhone не масштабировал страницу.

Я сделал это, также с JQuery:

Конечно, некоторые другие элементы интерфейса, возможно, придется адаптировать, если этот 16px размер шрифта нарушает дизайн.

Через некоторое время попыток я придумал это решение

На «mousedown» он устанавливает размер шрифта ввода в 16px. Это предотвратит увеличение. На событии фокуса он изменяет размер шрифта обратно к начальному значению.

В отличие от ранее опубликованных решений, это позволит вам установить любой размер шрифта для ввода.

Прочитав здесь почти каждую строчку и протестировав различные решения, это благодаря всем, кто поделился своими решениями, что я придумал, протестировал и работал для меня на iPhone 7 iOS 10.x:

Тем не менее, он имеет некоторые недостатки: заметно «скачок» в результате быстрого изменения размера шрифта, происходящего между состояниями «зависание» и «фокус», а также влияние перерисовки на производительность.

Вдохновленный ответом @jirikuchta, я решил эту проблему, добавив немного CSS:

Нет JS, и я не замечаю ни вспышки, ни чего-либо.

Стоит отметить, что viewport with maximum-scale=1 также работает, но не тогда, когда страница загружается как iframe, или если у вас есть другой скрипт, модифицирующий и viewport т. Д.

Псевдоэлементы вроде :focus не работают, как раньше. Начиная с iOS 11, простое объявление сброса может быть добавлено перед вашими основными стилями (при условии, что вы не переопределите их с меньшим размером шрифта).

Стоит отметить, что для библиотек CSS, таких как Tachyons.css, легко случайно изменить размер шрифта.

Например, class: f5 эквивалентно:, fontSize: 1rem что хорошо, если вы сохранили масштаб шрифта основного текста по умолчанию.

Однако: если вы выберете класс размера шрифта: f6 это будет эквивалентно fontSize: .875rem небольшому дисплею вверх. В этом случае вам нужно быть более точным в отношении объявлений сброса:

Кстати, если вы используете Bootstrap , вы можете просто использовать этот вариант:

Мне пришлось «исправить» проблему с автоматическим увеличением в элементах управления формы для веб-сайта Голландского университета (который использовал 15px в элементах управления формой). Я выдвинул следующий набор требований:

• пользователь все еще должен иметь возможность увеличить
• размер шрифта должен оставаться прежним
• нет вспышек временного другого стиля
• не требуется JQuery
• должен работать на новейшей iOS и не мешать любой другой комбинации ОС / устройства
• по возможности нет магических таймаутов, а при необходимости правильно сбрасывайте таймеры

Это то, что я придумал до сих пор:

• Обратите внимание, что до сих пор я тестировал его только на iOS 11.3.1, но скоро опробую его на нескольких других версиях.
• Использование событий focusIn означает, что для него требуется как минимум iOS 5.1 (но я считаю, что сайты, которые мы создаем, работающие в версиях для iOS старше 9, как крутой бонус)
• Использование делегирования событий, потому что на многих сайтах, над которыми я работаю, есть страницы, которые могут динамически создавать элементы управления формой.
• Установка для eventListeners элемента html (documentElement), чтобы не нужно было ждать, пока тело станет доступным (не нужно беспокоиться о проверке, находится ли документ в состоянии готовности / загрузки, или о необходимости ждать события DOMContentLoaded)

Вместо того, чтобы просто установить размер шрифта в 16px, вы можете:

1. Стиль поля ввода так, чтобы он был больше, чем предполагалось, позволяя установить логический размер шрифта 16 пикселей.
2. Используйте scale() CSS-преобразование и отрицательные поля, чтобы уменьшить поле ввода до правильного размера.

Например, предположим, что ваше поле ввода изначально оформлено с помощью:

Если вы увеличите поле, увеличив все размеры на 16/12 = 133,33%, а затем уменьшите scale() на 12/16 = 75%, поле ввода будет иметь правильный визуальный размер (и размер шрифта), и масштабирование будет отсутствовать. фокус.

Поскольку это scale() влияет только на визуальный размер, вам также необходимо добавить отрицательные поля, чтобы уменьшить логический размер поля.

поле ввода будет иметь логический размер шрифта 16 пикселей, в то время как будет отображаться текст размером 12 пикселей.

У меня есть запись в блоге, в которой я немного подробнее расскажу, и этот пример представлен в виде просматриваемого HTML:
в iPhone Safari нет увеличения при вводе, идеальный пиксельный способ

Даже с этими ответами мне потребовалось три дня, чтобы понять, что происходит, и мне может понадобиться решение снова в будущем.

Моя ситуация немного отличалась от описанной.

У меня был какой-то спорный текст в div на странице. Когда пользователь нажал на кнопку DIFFERENT div, своего рода кнопку, я автоматически выделил некоторый текст в contenteditable div (диапазон выбора, который ранее был сохранен и очищен), запустил execCommand расширенного текста в этом выделении и очистил его снова.

Это позволило мне незаметно изменять цвета текста на основе взаимодействия пользователя с цветовыми элементами в других местах на странице, сохраняя при этом выделение, как правило, скрытым, чтобы они могли видеть цвета в правильном контексте.

Что ж, на iPad Safari нажатие на div цвета привело к появлению экранной клавиатуры, и я ничего не сделал, чтобы помешать этому.

Я наконец понял, как iPad делает это.

Он прослушивает последовательность прикосновений и касаний, которые запускают выделение редактируемого текста.

Когда эта комбинация происходит, она показывает экранную клавиатуру.

На самом деле, он выполняет масштабирование тележки, где он расширяет нижележащую страницу, в то же время увеличивая редактируемый текст. Мне потребовался день, чтобы понять, что я вижу.

Таким образом, решение, которое я использовал, состояло в том, чтобы перехватить как touchstart, так и touchend для этих конкретных цветовых элементов. В обоих обработчиках я прекращаю распространение и всплывающие сообщения и возвращаю false. Но в событии touchend я запускаю то же поведение, что и нажатие.

Итак, раньше Safari запускал, как мне кажется, «touchstart», «mousedown», «touchend», «mouseup», «click», и из-за моего кода, выделение текста, в таком порядке.

Новая последовательность из-за перехватов — это просто выделение текста. Все остальное перехватывается до того, как Safari сможет обработать его и выполнить работу с клавиатурой. Перехваты touchstart и touchend также предотвращают запуск событий мыши, и в контексте это вполне нормально.

Я не знаю более простой способ описать это, но я думаю, что важно иметь его здесь, потому что я нашел эту тему в течение часа после первого столкновения с проблемой.

Я на 98% уверен, что то же самое исправление будет работать с полями ввода и всем остальным. Перехватывайте события касания и обрабатывайте их отдельно, не позволяя им распространяться или пузыриться, и подумайте о том, чтобы сделать какие-либо выборки после небольшого тайм-аута, просто чтобы убедиться, что Safari не распознает последовательность как триггер клавиатуры.

Источник