Prevent iPhone resizing to `select` in web application

Question

I have this code:

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

Work in a full-screen web application on the iPhone.

When you select something from this list, the iPhone approaches the select element. And does not throw back after choosing something.

How can I prevent this? Or change the scale?

Answer 1

Probably because the browser is trying to enlarge the area because the font size is less than the threshold, this usually happens on the iphone.

Providing the metatag attribute "user-scalable = no" will restrict the user from scaling elsewhere. Since the problem is only with the select element, try using the following in your css, this hack was 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 choosing iphone

Answer 2

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

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

Answer 3

This seemed to work for my case in solving this problem:

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

Offered here by Christina Arasmo Beimer

Answer 4

iPhone will slightly change the margins if the text is less than 16 pixels . I would suggest setting the text of the mobile form field to 16 pixels, and then override the size back for the desktop.

Disabled answers are useless for partially visible users, and may still want to increase the number of mobile phones.

Example:

 # Mobile first input, textarea, select { font-size: 16px; } # Tablet upwards @media (min-width: 768px) { font-size: 14px; } 

Answer 5

I was a bit late for the party, but found a pretty neat workaround that solves this problem only with css manipulations. In my case, I could not change the font size for design reasons and could not turn off the scaling.

Since the iPhone will slightly increase the size of the form margins if the text is set to less than 16 pixels, we can trick the iPhone into believing that the font size is 16 pixels and then convert it to our size.

For example, let's take an example when our text is 14px, so it scales because it is less than 16px. Therefore, we can convert the scale in accordance with 0.875.

In the following example, I added 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 } 

Hope this helps!

Answer 6

Try the following:

 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 launched before onchange, so the zoom will be disabled during the onchange bypass. In the onchange function, you can restore the original situation at the end.

Tested on iPhone 5S

Answer 7

iOS enlarges the page to display a larger input box if its font size is less than 16 pixels.

only when you click on any field, this is the scaling of the page. so on click, we make it at 16px and then changed to the default

the code snippet below works fine for me and is targeted at mobile devices,

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

Answer 8

I don’t think you can do anything about isolation behavior.

One thing you can try is not to scale the page at all. This is good if your page is for your phone.

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

Another thing you could try is to use the JavaScript construct, rather than the general "select" statement. Create a hidden div to show your menu, handle clicks in javascript.

Good luck

Answer 9

Like here, they answered: Disable auto-zoom when entering text "tag - Safari on iPhone

You can prevent Safari from automatically enlarging text fields during user input without disabling users' ability to zoom in. Just add maximum-scale=1 , but don't specify the custom scale attribute suggested in other answers.

This is a useful option if you have a shape in the layer that “floats” when zoomed in, which can lead to the displacement of important user interface elements off the screen.

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

Answer 10

Try adding this CSS to disable the default iOS style:

 -webkit-appearance: none; 

This will also work with other elements that receive special styles, such as input [type = search].

Answer 11

I read about it for several hours and the best solution is jquery here. It also helps with the Next Tab option in iOS Safari. I also have input, but you can delete it or add as you wish. In essence, mousedown fires before the focus event and makes the browser think its 16px. In addition, focusing will work on the Next Tab function 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',''); }); }) 

Answer 12

Set the font size "select" to 16 pixels

Select {font size: 16 pixels; }