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>

Answer 1

我通过增加字体大小来解决上述问题。 Safari单击文本后不需要缩放所需的最小字体大小为50px。所以我添加了以下css规则：

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

由于文本无论如何都是隐藏的，因此不会影响显示。并且，您也可以保持放大。

Answer 2

您可以使用视口元标记全局禁用缩放。我不熟悉当你点击一个表单对象时浏览器如何放大，所以我不是100％肯定这对你的情况来说是一个有效的解决办法（但它仍然需要尝试...）：< / p>

<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”。将这些值设置为相同将禁用缩放。

Answer 3

Jasper的解决方案导致我的页面在更改设备方向时不能正确地重新缩放，在两个方向上都能正常工作的稍微好一点的解决方案是：

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

jQuery Mobile不需要的缩放选择菜单

3 个答案: