jQuery Mobile在选择菜单中不需要缩放

Question

点击选择菜单时，会出现本地选择器，这正是我想要的。但它也会放大页面。

我可以全局禁用缩放吗？

由于布局要求，我的许多div都位于<div data-role="content">之外。

我的选择器如下所示。

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

- pcasa

Answer 1

我通过增大字体大小解决了上述问题。Safari不缩放文本的最小字体大小为50px，因此我添加了以下CSS规则：

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

由于文本已被隐藏，因此不会影响显示。而且，你也可以保持缩放。

- Tanay

Answer 2

您可以使用 viewport meta 标签全局禁用缩放。我不太熟悉浏览器在单击表单对象时如何缩放，因此我不能百分之百确定这将是您情况的有效解决方法（但仍值得一试...）：

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

注意：禁用缩放的重要部分是："initial-scale=1.0,maximum-scale=1.0"。将这些值设置为相同将禁用缩放。

- Jasper

---

如果我不想完全禁用页面缩放，而只是对某些菜单进行限制呢？ - a paid nerd

Answer 3

Jasper的解决方案导致我的页面在更改设备方向时无法正确地重新缩放，一种稍微更好的解决方案是：

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

- zack