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

Question

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

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

我一直试图看到以下关系：

• document.documentElement.clientWidth
• screen.width
• window.innerWidth
• window.outerWidth

......但是还没有看到任何明显的东西。

Answer 1

这很难看，但它确实显示了一些几乎可行的代码（在iOS上查看它的工作情况。使用桌面并点击页面右上角的编辑来查看或编辑代码）：

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

＆＃34; overzoom＆＃34;的诀窍计算是讨厌的，但它确实补偿了多个视口缩放。这是一个需要解决的复杂问题，因为存在竞争问题：

• 捏缩放
• 由于输入焦点而缩放
• ＆＃34;位置：固定＆＃34;变焦
• 可能是操作系统（辅助功能）缩放

我找到的可能解决方案是：

1. 使用上面的计算定位菜单并定位：绝对 - 更新onscroll事件中的左/上。有丑陋的颤抖（可以通过隐藏来改善一点，只在缩放/滚动完成时显示）。

2. 使用position：fixed定位菜单，但在发生缩放/滚动时更改左/上以更正菜单位置。更少的颤抖，但我不能100％可靠（某些竞争条件）。

3. 不适合您的情况（由于存在破坏风险的情况而高度推荐）：您可以通过取消touchstart上的默认设置来prevent pinch zooming and iOS10 double-click zooming。很难，因为它需要许多其他的解决方法，所以正常的触摸工作，并需要合成滚动和缩放（但有丑陋的副作用，如有时阻止滚动工作，也干扰可访问性，如果语音可访问性打开等等）。

   < / LI>

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