Question

我正在构建一个使用jQuery和hammer.js进行触控的移动网络应用。 hammer.js有一个名为“prevent_default”的功能，可以关闭Safari的滚动/缩放/漂亮的东西。我有一个表格使用＆lt;输入＆gt;对于文本字段，以及在您点按表单时调用.focus（）的javascript侦听器。

这一切都很有效，直到一定程度。页面固定到位并且看起来很漂亮，当您单击表单字段时，它会放大并显示iOS键盘。问题是当用户输入文本时，无法缩小。浏览器从.focus（）放大，浏览器栏已经消失，您必须关闭浏览器选项卡并重新输入URL而不是刷新。

我正在寻找一种强制浏览器缩小回初始视图的方法。我已经在互联网上找了一些解决方案，但还没找到任何东西。

我在标题中设置了视口元标记以从头开始禁用缩放，但在解决此问题时没有用处

Answer 1

一个hacky解决方案是在更改视口属性后聚焦并模糊输入字段。

function refreshViewportZoom(){
  var viewport = document.querySelector("meta[name=viewport]");
  viewport.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, scale=0.5, user-zoom=0.5, zoom=0.5');
  document.getElementById('myInputField').focus();
  setTimeout(blurLater,2000);
}

function blurLater(){
  document.getElementById('myInputField').blur();
}

需要blurLater作为函数，因为Safari似乎向前看并忽略它。

移动Safari Web App缩放问题

1 个答案: