jQuery Mobile unwanted zoom with select menu

Question

When clicking on a select menu, native select shows up which is what I want. But it also zooms the page.

Can I disable zoom globally?

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

My select looks like so.

<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

I fixed the above problem by increasing the font size. The minimum font size that safari requires to not zoom after clicking on the text is 50px. So I added the following css rule:

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

Since the text is hidden anyway, it doesn't affect the display. And, you can keep the zoom on as well.

Answer 2

You can globally disable zooming with the viewport meta tag. I'm not familiar with how the browser zooms in when you click on a form object so I'm not 100% sure this will be a valid work-around for your situation (but it's still something to try...):

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

NOTE: for disabling zoom the important part is: "initial-scale=1.0,maximum-scale=1.0". Setting these values to the same will disable zoom.