Question

我有一个使用jQuery提交搜索的网络表单。表单本身不会触发提交事件，因为我抓住并删除它（这是一个更大更复杂的表单的一部分，我使用渐进增强来添加此功能）。

在iPhone上，一旦对焦，浏览器就会自动放大到我的搜索输入。在“输入”键盘事件中，搜索是通过javascript执行的，我模糊了输入，它消除了屏幕上的iPhone键盘，但浏览器仍然放大到输入区域。

有没有办法通过javascript以编程方式再次缩小回到初始视口区域？

编辑：搜索执行没有重定向，通常会在新页面加载时重置视口 - 所有内容都发生在这里的一页上。

Answer 1

如果输入的字体大小至少为16像素，则开始时不会触发放大。

Answer 2

我已成功使用以下内容。

$('input, select, textarea').on('focus blur', function(event) {
    $('meta[name=viewport]').attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>

<body>
  <input id="input" type="text" placeholder="Type here..." />
</body>

Answer 3

您是否需要或想让人们放大？如果没有，您是否已将此元标记设置在脑中？

$headers = @get_headers($filename);
$exists = ($headers[0] == 'HTTP/1.1 404 Not Found'); //file does not exist

据我所知，这将在第一个实例中停止缩放问题。

Answer 4

.css

input[type=search] {
    font-size: max(1em, 16px);
}

如其他答案所述，使用 16px 字体大小

首先阻止浏览器放大
避免在元标记中使用最大比例，以防止放大其他浏览器

自动放大到表格后如何触发iPhone缩小？

4 个答案: