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

Question

I've got this code:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

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?

Herson

Answer 1

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.

HTML :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS:

select{
font-size: 50px;
}

src: unzoom after selecting in iphone

Undersell

If the text is visible (as in my case) it seems that 16px is the minimum before it enables the zoom. – Lindsay

Just to make it more clear, this line will prevent autoscaling: $('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head'); – Ketonuria

Since when is the text hidden in a select element?? "Will not bring any layout issues" – Elayneelazaro

var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false ); if(iOS) { $('element-to-apply-to').css('font-size', '50px'); } – Peso

@Billy A select element on a mobile browser does not render like a desktop web browser. The mobile OS like android/iOS pops out native view to actually select a value. So the font size does not matter at all, this is what I meant. Thanks – Undersell

@Billy I mean to say, When the font-size is given a value of 50px, it looks odd on other html elements than a dropdown, which I called layout issue. – Undersell

See @martinedwards's answer below where it is revealed that this trick works for anything greater than 16px. So it doesn't have to be a 50px monster. – Cementite

tywm. wtf with this apple bs? zooming form inputs, changing style of text phone numbers and etc – Australoid

But if you need to allow user-scalable for acessibility issues or any other reason see the answer below #6483925 – Jehoshaphat

This hack is working in case of input types. But when i am selecting any value from dropdown (I am using angular's ui-select) than it gets zoomed. I tried to increase the font size of lists in dropdown but it didn't worked. Any help? – Hypothermal

@Ketonuria how could I do this in vanilla JS? – Knockknee

@Telarian #18982728 – Ketonuria

Hi, just the meta tag fixed the issue. I didn't need the font-size property at all. – Merman

I was thinking user-scalable=no is not working in iOS! does it work? – Noted

Answer 2

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

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Veronikaveronike

Actually, adding width=device-width, initial-scale=1.0, maximum-scale=1.0 should be enough. I don't believe you need user-scalable with maximum-scale. – Branca

@DanSmart, in at least my case (and I don't know what sets it apart), min/max scale wasn't enough - adding user-scalable=no did make difference. – Pascoe

This feels like a very heavy-handed approach – I recommend using user-scalable=no with caution. From Dev.Opera, "It is also possible to completely turn off zooming, however keep in mind that zooming is an important accessibility feature that is used by a lot of people. Turning it off should therefore only happen when really necessary, such as for certain types of games and applications." – Luciferase

user-scalable is ignored as of iOS 10. – Colchester

When your font is larger than 16px, the browser may zoom out when focusing an input. For me, I only needed to add minimum-scale=1, which also preserves the user's possibility to zoom. – Gynous

Answer 3

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.

Example:

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

Stomachache

That's good! But what if my text overflows the full width of the select box? What can I do in this case? – Jehoshaphat

If your starting option message fits on, then that should suffice. As once they have selected an option, even if slightly truncated they will likely remember what it was. But yeah, more of a problem if it says "Please choose a Co..." – Stomachache

This answer works and seems to offer the least obtrusive method. Thanks! – Lange

Answer 4

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

@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

Suggested here by Christina Arasmo Beymer

Mikes

In my case IOS 7x the old user-scalable was not enough. The above did the trick thank you for sharing. – Castalia

Answer 5

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.

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

I hope it helps!

Reunionist

It's a nasty but also clever hack and I don't like hacks... but in this case it's the best answer on this page and there is no alternative if you have to stop the zoom and still want to keep the design like it is. Thanks a lot! :) – Stemson

The best answer IMHO. The only note - one might have to play with transform-origin values (for example, center was the most appropriate in my case). – Camorra

Answer 6

iOS zooms the page to show a larger input field if its font-size is less than 16px.

only On click of any field, it's zooming the page. so on click, we are making it as 16px and then changed to default value

below snippet works fine to me and targeted for mobile devices,

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

Therefor

Answer 7

Try this:

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DisablePinchZoom will be fired before the onchange so zoom will be disable at the time the onchange is fired. On the onchange function, at the end you can restore the initial situation.

Tested on an iPhone 5S

Odum

Answer 8

Set all 'select' font size to 16px

select{ font-size: 16px; }

Od

Answer 9

I don't think you can't do anything about the behavior in isolation.

One thing you can try is keep the page from zooming at all. This is good if your page is designed for the phone.

<meta name="viewport" content="width=device-width" />

Another thing you could try is using a JavaScript construct instead of the generic "select" statement. Create a hidden div to show your menu, process the clicks in javascript.

Good luck!

Immigrate

Answer 10

As answered here: Disable Auto Zoom in Input "Text" tag - Safari on iPhone

You can prevent Safari from automatically zooming in on text fields during user input without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute suggested in other answers.

It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off screen.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Sidra

Answer 11

Try adding this CSS to disable Ios' default styling:

-webkit-appearance: none;

This will also work on other elements that get special styling, like input[type=search].

Bartz

Answer 12

Been reading for a few hours on this and the best solution is this jquery here. This also helps with the "next tab" option in iOS Safari. I have inputs here as well but feel free to remove them or add as you like. Basically the mousedown fires before the focus event and tricks the browser into thinking its 16px. In addition, the focusout will trigger on the "next tab" feature and repeat the process.

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})

Whiskey