防止iPhone缩放表单

代码：

<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，选择菜单。

可以通过

为所有输入字段设置 font-size：16px 来防止这种情况。

更新：此方法在iOS 10上不再有效。

它

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

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

添加user-scalable=0，它也应该适用于您的输入。

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

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

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

这可能有助于查看：

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

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

编辑：

该链接提到，

2）您可以使用javascript动态更改META视口标签（请参阅使用 Javascript 在 iPhone 野生动物园上启用/禁用缩放？）

详细阐述：

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

如果您在单击表单元素时无法更改标签，

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

设置字体大小的最多投票答案对我不起作用。使用 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用户必须已经习惯了浏览器在适用场景中进行一些动态缩放。

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

在iOS10.0.1上不再工作

font-size:16px作品

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

//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">' );
})

如果您使用的是 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中对其进行了测试，它就像一个魅力！

所以这是对我有用的最终修复程序。

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

这里的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>');
}

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

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

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

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 正常工作。

相关内容

最新更新

热门标签：