Css iphone input focus zoom

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.

Источник

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.

Источник

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.

Источник

Mobile Safari: Javascript focus() method on inputfield only works with click?

I have a simple input field like this.

And I’m trying to focus() it inside a function. So inside of a random function (doesn’t matter what function it is) I have this line …

This works just fine on every Desktop whatsoever.

However it doesn’t work on my iPhone. The field is not getting focused and the keyboard is not shown on my iPhone.

For testing purposes and to show you guys the problem I did a quick sample:

Any idea why the focus() wouldn’t work with the timeout function on my iPhone.

To see the live example, test this fiddle on your iPhone. http://jsfiddle.net/Hc4sT/

Update:

I created the exact same case as I’m currently facing in my current project.

I have a select-box that should — when «changed» — set the focus to the input field and slide-in the kexboard on the iphone or other mobile devices. I found out that the focus() is set correctly but the keyboard doesn’t show up. I need the keyboard to show up.

9 Answers 9

Actually, guys, there is a way. I struggled mightily to figure this out for [LINK REMOVED] (try it on an iPhone or iPad).

Basically, Safari on touchscreen devices is stingy when it comes to focus() ing textboxes. Even some desktop browsers do better if you do click().focus() . But the designers of Safari on touchscreen devices realized it’s annoying to users when the keyboard keeps coming up, so they made the focus appear only on the following conditions:

1) The user clicked somewhere and focus() was called while executing the click event. If you are doing an AJAX call, then you must do it synchronously, such as with the deprecated (but still available) $.ajax() option in jQuery.

2) Furthermore — and this one kept me busy for a while — focus() still doesn’t seem to work if some other textbox is focused at the time. I had a «Go» button which did the AJAX, so I tried blurring the textbox on the touchstart event of the Go button, but that just made the keyboard disappear and moved the viewport before I had a chance to complete the click on the Go button. Finally I tried blurring the textbox on the touchend event of the Go button, and this worked like a charm!

When you put #1 and #2 together, you get a magical result that will set your login forms apart from all the crappy web login forms, by placing the focus in your password fields, and make them feel more native. Enjoy! 🙂

Источник

Как убрать увеличение экрана на IPhone при нажатии на select (или input) без увеличения размера шрифта?

Знаю про решение с увеличением шрифта элементов формы

Но хотелось быть узнать есть ли еще какие-нибудь решения

2 ответа 2

Для iphone 9 и ниже (для 10 уже не работает) можно было добавить user-scalable=0 у viewport

Можно, как пример, этот viewport менять js’ом, что-то типа этого:

Есть два варианта:

1. Шрифт не менее 16px

2. Запрет масштабирования

Но я бы не рекомендовал отключать масштабирование. Это неправильное решение. Лучше через CSS исправить эту проблему:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html css reactjs scss или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.7.40929

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник