使用JavaScript检测视口宽度是否大于Mobile Safari上的可见宽度

Question

我在页面上固定了一个位置（固定在任何角落）的元素（我不一定可以控制meta视口标签-它是第三方网站的嵌入式小部件）。 在Mobile Safari上，当用户捏捏页面到某个特定点时，视口会变得大于可见区域。 在这一点上，固定位置元素保持附着在视口上，并且不一定在可见区域中。

我想比较两个宽度：可见区域的宽度和视口的宽度。 我相信可见区域的大小是window.innerWidth。 我不确定如何测量视口。

我一直在尝试查看以下两者之间的关系：

• document.documentElement.clientWidth
• 屏幕宽度
• window.innerWidth
• window.outerWidth

...但是看不到任何明显的东西。

Answer 1

这很难看，但确实显示了一些几乎可以正常工作的代码（在iOS上查看以查看其工作。使用桌面并单击页面右上角的“编辑”以查看或编辑代码）：

https://jsbin.com/jopamu （仅适用于iOS）

“ overzoom”计算的技巧很糟糕，但是确实可以补偿多视口缩放。 由于存在竞争问题，因此需要解决一个复杂的问题：

• 捏变焦
• 由于输入焦点而缩放
• “位置：固定”缩放
• 潜在的操作系统（可访问性）缩放

我发现的可能解决方案是：

1. 使用上面的计算方法定位菜单并定位：absolute-更新onscroll事件中的左/上。 丑陋的抖动（通过隐藏和仅在缩放/滚动完成时才显示，可以有所改善）。

2. 使用position：fixed定位菜单，但是在发生缩放/滚动时更改左/上以校正菜单位置。 颤动要少得多，但我不能完全保证它100％可靠（在某些比赛条件下）。

3. 不适合您的情况（由于存在破裂的危险，因此不建议使用）：您可以通过取消touchstart的默认设置来防止捏缩放和iOS10双击缩放 。 困难，因为它需要许多其他解决方法，所以正常的触摸才能正常工作，并且需要合成滚动和缩放（但是具有丑陋的副作用，例如有时会阻止滚动工作，并且还会干扰可访问性，例如，如果打开了语音可访问性等）。

如果您只想查看宽度，请使用旧版本： https : //output.jsbin.com/jopamu/6