iphone html 缩放,html-防止iPhone缩放表格？

html-防止iPhone缩放表格？

编码：

Home

About

Services

Contact

当我触摸user-scalable=no时，iPhone会放大该元素(取消选择后不会缩小)。

我该如何预防？ 还是缩小？ 我不能使用user-scalable=no，因为我实际上需要该功能。 适用于iPhone，选择菜单。

11个解决方案

71 votes

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

Supra answered 2020-06-21T05:38:36Z

67 votes

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

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

添加user-scalable=0，它也应该在您的输入中起作用。

Andrea Turri answered 2020-06-21T05:38:16Z

18 votes

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

input, select, textarea {

font-size: 16px;

}

该解决方案也被各种框架使用，可以避免使用元标记。

codingmechanic answered 2020-06-21T05:39:00Z

3 votes

查看以下内容可能会有所帮助：

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

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

编辑：

该链接提到，

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

详细说明：

视口元标记设置为允许缩放

用户点击表单元素，更改元标记以禁用缩放

按下完成后，视口将更改为允许缩放

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

Charlie answered 2020-06-21T05:40:04Z

3 votes

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

$(document).ready(function ()

{

if (/iPhone/.test(navigator.userAgent) && !window.MSStream)

{

$(document).on("focus", "input, textarea, select", function()

{

$('meta[name=viewport]').remove();

$('head').append('');

});

$(document).on("blur", "input, textarea, select", function()

{

$('meta[name=viewport]').remove();

$('head').append('');

});

}

});

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

请注意，UI仍在初始化缩放，但会迅速再次缩小。 我相信这是可以接受的，并且iPhone用户必须已经习惯了浏览器在适用情况下仍会进行一些动态缩放。

Alex answered 2020-06-21T05:40:34Z

3 votes

在iOS10.0.1上不再可用

font-size:16px作品

atorgfr answered 2020-06-21T05:40:58Z

2 votes

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

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

})

$('select').focusout(function(){

$('meta[name=viewport]').remove();

$('head').append('' );

})

gregkerzhner answered 2020-06-21T05:41:19Z

0 votes

如果您使用的是Bootstrap，则发现了一个简单的修复方法：

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

Large Label

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

在iPhone SE的Safari和Chrome中对其进行了测试，它的魅力十足！

Hugo Lauzon answered 2020-06-21T05:41:52Z

0 votes

所以这是最适合我的最终解决方法。

@media screen and (-webkit-min-device-pixel-ratio:0) {

select,

textarea,

input {

font-size: 16px !important;

}

}

Adeel Malik answered 2020-06-21T05:42:12Z

0 votes

这是jQuery Solution对我来说很好。

device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";

if(device_type === "touchstart" ){

$('head').append('');

}

jalalBK answered 2020-06-21T05:42:32Z

0 votes

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

daxmacrog answered 2020-06-21T05:42:58Z