2

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

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

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

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

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

4

1 回答 1

0

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

https://jsbin.com/jopamu（仅限 iOS）

“过度缩放”计算的技巧很讨厌，但它确实在一定程度上补偿了多个视口缩放。这是一个需要解决的复杂问题，因为存在相互竞争的问题：

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

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

  1. 使用上面的计算和 position:absolute 定位菜单 - 在 onscroll 事件中更新左侧/顶部。有丑陋的抖动（可以通过隐藏并仅在缩放/滚动完成时显示）来改善一点。

  2. 使用 position:fixed 定位菜单，但在发生缩放/滚动时更改左侧/顶部以更正菜单位置。少得多的颤抖，但我不能完全得到它 100% 可靠（一些比赛条件）。

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

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

于 2016-09-28T04:44:54.760 回答