防止iPhone缩放表格？ [复制]

Posted 2023-03-05

【中文标题】防止iPhone缩放表格？ [复制]

【英文标题】：Prevent iPhone from zooming form? [duplicate]

【发布时间】：2012-06-19 07:46:57

【问题描述】：

代码：

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

【问题讨论】：

***.com/questions/6483425/…

@Charlie - 这会阻止缩放整个网站，而不仅仅是表单。

【参考方案1】：

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

【讨论】：

这对我来说非常有效。到目前为止最简单的解决方案，它与 ios 的意图很相称：当文本太小而无法在移动设备上阅读时进行缩放。

这似乎不再起作用了：/ ...我已经在带有 iOS 9.0.2 的 iPhone 6 上对其进行了测试...我的输入字段达到了 20px，但它仍然坚持缩放以使字段充满屏幕

这里相同，不适用于我在 9.2.1 的 Iphone 5 上

它今天仍然适用于 iPhone 5S 和 iOS 9.3.2

@Alex 它适用于我在 iPhone 5S 上使用相同的 iOS 版本。在此设备上，仅在 input:active 上将字体大小设置为 16px 似乎可以在不改变明显字体大小的情况下达到目的。设计不变，但自动缩放功能被禁用。

【参考方案2】：

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

---

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

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

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

【讨论】：

我需要网站上的缩放功能。我只是不希望它用于表单。

尝试将font-size: 16px 提供给：input[type="text"], input[type="number"], textarea。

它从 font-size: 40px 开始工作！ :)（视口设置为宽度=735px）。谢谢！

这将禁用缩放，使用字体大小以获得更好的用户体验。

@AndreaTurri 至少编辑您的答案以节省人们的时间。

【参考方案3】：

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

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

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

【参考方案4】：

这可能有助于查看：

Disable Auto Zoom in Input "Text" tag - Safari on iPhone

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

编辑：

链接提到，

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

详细说明：

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

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

【讨论】：

它包含 3 个解决方案 - 没有一个让我满意 :( （2 在我的情况下实际上不起作用）。

用可能的解决方案编辑

谢谢@Charlie。您的解决方案确实像预期的那样工作，但另一个人提出了一些更简单的方法，这在我的情况下非常好。我只需要将 SELECT 的字体大小提高到 40 像素（视口宽度 = 735 像素）。现在 iPhone 导航清晰可读，并且不会缩放。

【参考方案5】：

设置字体大小的投票最多的答案对我不起作用。将javascript to identify the client 与此处答案中的元标记一起使用，我们可以防止 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 用户一定已经习惯了浏览器在适用场景中无论如何都会进行一些动态缩放。

【参考方案6】：

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

在 iOS10.0.1 上不再工作

font-size:16px 有效

【讨论】：

我尝试了类似的方法，它适用于 ios 10.3.3。我将最小和最大比例设置为 1，并省略了用户可缩放（假设它默认为是）

这段代码的问题是如果你将用户缩放设置为0，用户将无法缩放，这对用户不友好！

【参考方案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">' );
)

【参考方案8】：

如果您使用的是 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 中进行了测试，效果非常好！

【参考方案9】：

所以这是对我很有效的最终修复。

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

【讨论】：

@SeaBass 这需要结合使用 user-scalable=0 在元视口标签上设置。

这与已经建议的 16px 解决方案相同，但有一些额外的错误代码

【参考方案10】：

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

【参考方案11】：

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

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

【讨论】：

截至 2020 年 10 月，这似乎破坏了捏缩放的能力（大概是因为比例会 > 1）

【参考方案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 正常工作。