我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?


当前回答

我最近(今天:D)不得不整合这种行为。为了不影响原始设计字段,包括combo,我选择在字段的焦点处应用转换:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

其他回答

将用户scalable=0添加到视区元,如下所示

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

为我工作:)

我用jQuery也做到了这一点:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

当然,如果16px的字体大小破坏了设计,则可能需要调整界面中的其他一些元素。

令人惊讶的是,这里有很多javascript和视口的答案,只有一个提到了文本大小调整,这是我认为最好的解决方案。

您可以将此设置为无。

添加以下CSS:

* {
 -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

这是工作!!!我完成了我的搜索旅程!

<meta name=“viewport”content=“width=640px,初始比例=.5,最大比例=.5”/>

在iPhone OS6、Android 2.3.3模拟器上测试

我有一个固定宽度为640px的移动网站,我面对的是自动变焦对焦。

我试着分配一些荡妇,但没有一个能同时在iPhone和Android上运行!

现在对我来说,禁用缩放是可以的,因为网站是移动第一设计!

这是我找到它的地方:如何调整视口大小和缩放以支持跨浏览器?

解决此问题的正确方法是将元视口更改为:

<meta name=“viewport”content=“width=设备宽度,初始比例=1,最大比例=1,用户可缩放=0”/>

重要提示:不要设置最小刻度!这将保持页面可手动缩放。