CODEWITHSUNDEEP
jquery-mobile
pcasa
pcasa

Reputation: 3730

jQuery Mobile unwanted zoom with select menu

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>

Upvotes: 4

Views: 11249

Answers (3)

Tanay
Tanay

Reputation: 121

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.

Upvotes: 12

zack
zack

Reputation: 3198

Jasper's solution caused my pages not to re-scale properly when changing device orientation, a slightly better solution which works correctly in both orientations is:

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

Upvotes: 3

Jasper
Jasper

Reputation: 76003

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.

Upvotes: 6

Related Questions