JQuery Mobile unwanted zoom with selection menu

Question

When I click on the selection menu, my own choice appears, which I want. But it also zooms in on the page.

Is it possible to disable zooming all over the world?

Due to layout requirements, many of my divs sit outside of <div data-role="content"> .

My choice is like this.

 <div id="inputField"> <select name="shipping[shipping_method]" id="shipping[shipping_method]"> <option value="opt_1">Option 1</option> <option value="opt_2">Option 2</option> </select> </div> 

Answer 1

You can globally disable scaling using the view meta tag. I am not familiar with how the browser scales when you click on the form object, so I am not 100% sure that this will be a valid workflow for your situation (but there’s still something to try ...):

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

NOTE. To turn off scaling, the important part is: "initial-scale = 1.0, maximum-scale = 1.0". Setting these values ​​will be disabled.

Answer 2

I fixed the above problem by increasing the font size. The minimum font size that safari does not require scaling after clicking on the text is 50 pixels. So I added the following css rule:

 .ui-select .ui-btn select{ font-size: 50px; } 

Since the text is still hidden, it does not affect the display. And you can also zoom in.

Answer 3

The Jasper solution caused my pages to not scale correctly when changing the orientation of the device, a slightly better solution that works correctly in both orientations:

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