iphone - 防止iPhone缩放表格？

Question

编码：

<select>
    <option value="1">Home</option>
    <option value="2">About</option>
    <option value="3">Services</option>
    <option value="4">Contact</option>
</select>

当我触摸select时，iPhone 会放大该元素（取消选择后不会缩小）。

我怎样才能防止这种情况？还是缩小回来？我不能使用user-scalable=no，因为我实际上需要那个功能。它适用于 iPhone，选择菜单。

Answer 1

这可以通过将 font-size:16px 设置为所有输入字段来防止。

Answer 2

更新：此方法不再适用于 iOS 10。

---

它取决于视口，您可以通过以下方式禁用它：

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

adduser-scalable=0它也应该适用于您的输入。

Answer 3

对于 iOS，您可以通过简单地为输入元素分配操作系统认为足够的字体大小（>=16px）来避免缩放输入元素，从而避免缩放，例如：

input, select, textarea {
    font-size: 16px;
}

它也是各种框架使用的解决方案，允许您避免使用元标记。

Answer 4

这可能有助于查看：

禁用自动放大输入“文本”标签 - iPhone 上的 Safari

您基本上需要捕获点击表单元素的事件，然后不运行默认的 iOS 放大操作，但仍允许它缩放页面的其余部分。

编辑：

链接提到，

2) 您可以使用 javascript 动态更改 META 视口标记（请参阅 Enable/disable zoom on iPhone safari with Javascript?）

详细说明：

1. 视口元标记设置为允许缩放
2. 用户点击表单元素，更改元标记以禁用缩放
3. 按下完成后，视口将更改为允许缩放

如果单击表单元素时无法更改标签，请放置一个模仿表单元素的 div，当您按下它时，它会更改标签，然后调用输入。

Answer 5

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

在 iOS10.0.1 上不再工作

font-size:16px作品

Answer 6

设置字体大小的投票最多的答案对我不起作用。使用javascript 来识别客户端以及此处答案中的元标记，我们可以防止 iPhone 在输入焦点上的缩放行为，同时保持缩放功能完好无损。

$(document).ready(function ()
{
    if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
    {
        $(document).on("focus", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
        });

        $(document).on("blur", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
        });
    }
});

似乎我们必须用模糊事件上的新值替换元标记，只是为了删除它似乎不会触发更新的行为。

请注意，UI 仍在初始化缩放，但它会很快再次缩小。我相信这是可以接受的，iPhone 用户一定已经习惯了浏览器在适用场景中无论如何都会进行一些动态缩放。

Answer 7

设置字体大小非常适合输入元素，但不适用于我的选择元素。对于选择标签，我需要在用户开始与选择元素交互时主动禁用视口缩放，然后在完成时重新启用它。

//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})

$('select').focusout(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})

Answer 8

所以这是对我来说很好的最终修复。

    @media 屏幕和 (-webkit-min-device-pixel-ratio:0) {
      选择，
      文本区域，
      输入 {
        字体大小：16px！重要；
      }
    }

Answer 9

这是 jQuery 解决方案对我来说效果很好。

device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input,  select, textarea {font-size: 16px;}</style>');
}

Answer 10

如果您使用的是 Bootstrap，只需找到一个简单的修复方法：

如 w3s 中所述：您可以通过将.form-group-lg添加到元素来快速调整水平表单中的标签和表单控件的大小。

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="control-label">Large Label</label>
    <div>
      <input class="form-control" type="text">
    </div>
  </div>

请参阅此页面上的第二个示例：http: //www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

在 iPhone SE 上的 Safari 和 Chrome 中对其进行了测试，效果非常棒！

Answer 11

使用maximum-scale=1代替user-scalable=no来防止表单缩放问题，而不会破坏用户捏缩放的能力。

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

Answer 12

我们在工作中遇到了这个问题，并找到了与@alex类似的答案。如果它是 iOS 设备，我们可以操作 viewport 标签：

document.addEventListener('DOMContentLoaded', event => {
  if (/iPhone/.test(navigator.userAgent) && !window.MSStream) {
    const metaViewportTag = document.head.querySelector('meta[name="viewport"]')
    metaViewportTag.content = 'width=device-width, initial-scale=1, maximum-scale=1'
  }
})

这可以防止在 iOS 中将表单控件缩放到焦点上，并且仍然允许 Android 正常工作。