Safari iPhone - 如何检测缩放级别和偏移?

问题描述 投票:17回答:6

我在iPhone上的Safari中查看如何在页面上跟踪用户缩放和平移的选项。 Safari暴露了移动和手势事件,因此理论上我可以保持平移和缩放操作的运行记录,但这似乎有点过分,因为浏览器必须在内部跟踪它。

这些信息是通过文档对象模型公开的吗?

iphone safari
6个回答
24
投票

放大时,调整window.innerWidth,但document.documentElement.clientWidth不是,因此:

var zoom = document.documentElement.clientWidth / window.innerWidth;

(我测试了iOS 4,没有qazxsw poi qazxsw poi)。

但是,我不会依赖它来做任何重要的事情。移动浏览器中的DOM视口大小/像素大小viewport


2
投票

根据<meta>,缩放事件(双击)没有暴露,所以我不知道你如何跟踪它。

我不相信这些信息是通过DOM公开的。


2
投票

在Mobile Safari和Android上,这是测量页面缩放程度的准确方法。

在这里试试:are a complete mess - 更改缩放然后单击小节。

技术是添加顶级div:

Safari Web Content Guide

并使用计算:

http://jsbin.com/cobucu/3

唯一的问题是找到一种整洁的方法来检测用户是否已经改变了缩放(捏,双击等)。选项:

  • webkitRequestAnimationFrame:非常可靠,但如果使用动画可能会导致jankiness(由于性能受到影响)
  • setInterval:可靠但非常难看
  • 触摸事件:寻找两个手指或双击:丑陋,也许很难100%可靠
  • window.onresize + window.onorientationchange + window.onscroll:简单但完全不可靠(编辑:和onscroll会导致WKWebView或Mobile Safari 8或更高版本中的性能问题)。

PS:Windows Phone需要一个不同的解决方案(缩放缩放不会改变视口 - 在Windows上的缩放缩放有自己独立的视口,javascript不可见)。

编辑:Android Visual Viewport调整大小和滚动事件可能有帮助吗?见<body> <div id=measurer style="position:absolute;width:100%"></div>


1
投票

我实际上认为自从史蒂夫的回答后,事情可能会有所改变,因为看看他提供的内容指南链接我可以看到关于function getZoom(){ return document.getElementById('measurer').offsetWidth / window.innerWidth; } https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport#Events的部分。

尚未尝试过但它们看起来非常有前景。一旦我检查出来并提供了一个演示链接,我会提供更新...


0
投票

我以这种方式测量缩放(仅适用于iOS):

Handling Multi-Touch Events

它不取决于内容的广泛程度。

但是,在iOS Safari中Handling Gesture EventsscreenOrientedWidth = screen.width; if (window.orientation == 90) { screenOrientedWidth = screen.height; } return screenOrientedWidth / window.innerWidth; 处理程序中不正确。您应该推迟这样的计算以便以后执行。在GWT中,我使用window.innerWidth,但我不能说如何在纯JavaScript中实现它。


0
投票

如果您正在使用具有位置的任何元素:已修复,这可能会变得复杂,因为位置:固定坐标相对于未定义窗口,其中窗口坐标相对于缩放视口。更多信息:gestureend

© www.soinside.com 2019 - 2024. All rights reserved.