Question

我的网站中包含全屏iframe。具体来说，iframe可以调整为全屏显示（通过全屏显示，我并不是说requestFullScreen，只是一个模态div，它具有固定的位置，并且顶部，底部，左侧，右侧= 0） about:blank一样，因此我可以访问主机上下文。

我想在iframe中禁用缩放功能，但保留缩放选项，就像在移动设备的主机页面上一样。根据{{3}}的答案，我可以使用

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

不幸的是，上面的代码在首页上有效，但在iframe内无效。也许我可以在iframe中preventDefault进行某种缩放事件？

我也尝试在运行时编辑meta标记，但它破坏了默认行为：

在主机页面上：

let viewPort = document.querySelector('meta[name=viewport]');
let content = '';
if (viewPort) {
  content = viewPort.getAttribute('content') || '';
}

// trigger this function from iframe when full screen mode changes:
window.fsChange = (isOpened) => {
    if (isOpened) {
      if (!viewPort) {
        viewPort = document.createElement('meta');
        viewPort.setAttribute('name', 'viewport');
        document.head.appendChild(viewPort);
      }
      viewPort.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
    } else {
      if (viewPort) {
        viewPort.setAttribute('content', content);
      }
    }

}

设置元标记内容时，如果之后再删除它，则设置不会回滚。例如。我设置了width=device-width和user-scalable=0，然后将内容设置为''，将禁用缩放，并且页面的宽度等于设备的宽度。

在移动设备上禁用iframe内部缩放

0 个答案: