CODEWITHSUNDEEP
javascriptcsshtmliphone-web-app
seymar
seymar

Reputation: 4063

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

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?

Upvotes: 100

Views: 116837

Answers (12)

martinedwards
martinedwards

Reputation: 5825

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;
}

Upvotes: 40

nasty
nasty

Reputation: 7077

Set all 'select' font size to 16px

select{ font-size: 16px; }

Upvotes: 1

Nimrod5000
Nimrod5000

Reputation: 139

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','');
    });
})

Upvotes: 0

nand-63
nand-63

Reputation: 117

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;
 }
}

Upvotes: 7

Abdul Sheikh
Abdul Sheikh

Reputation: 547

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].

Upvotes: 0

daxmacrog
daxmacrog

Reputation: 9611

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">

Upvotes: 0

Layor Zee
Layor Zee

Reputation: 91

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!

Upvotes: 9

Sasi Dhar
Sasi Dhar

Reputation: 1397

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

Upvotes: 120

Dario Brizio
Dario Brizio

Reputation: 31

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

Upvotes: 3

Vineel Shah
Vineel Shah

Reputation: 1058

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!

Upvotes: 0

TonyD
TonyD

Reputation: 461

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

Upvotes: 35

sciritai
sciritai

Reputation: 3758

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">

Upvotes: 58

Related Questions