在 Safari 浏览器 (iOS 7) 上,在捏合缩放下调整事件大小,仅在横向缩放中
Resize events on Safari (iOS 7) under pinch zoom, only in landscape?
我正在尝试拍摄我们在iOS 7版本中看到的行为变化的问题,也许其他人已经遇到过。
我们有一些代码来处理我们网站中的大小调整事件。理想情况下,这应该的工作方式是,如果您正在进行缩放(例如,在手机上进行捏合缩放),它不会被执行,但是如果您调整浏览器窗口的大小,它就会被触发。
我们发现,在我们的iOS 7设备上,当我们进行捏合缩放时,safari经常触发javascript调整大小事件。这不会一直发生,似乎只在横向模式下发生。我们的iOS6设备没有这样做,我们手头的任何Android设备也没有这样做。这些有两个不良影响:
1)它似乎会导致页面"跳转",即它会突然重新定位页面,通常是左上角。请注意,即使我们没有调整大小事件处理程序,也会发生这种情况。
我不认为这是我们的页面布局。我们特别小心地避免可能导致小数像素和百分比高度和宽度等行为的内容。此外,我们可以通过将视口宽度(通过 META 标签)设置为 700px 或更小来消除这种行为。另外,如前所述,我们在配置文件中没有看到任何此类问题。(我们没有设置任何其他视口设置,所以这不是问题;设置"width=客户端宽度"对我们没有帮助。
2)似乎在调整大小处理程序中,它并没有真正为我们提供window.innerWidth的预期值;即我将被放大,它会给我一个大于预期的值。例如,我通常使用这样的东西来确定我们是否正在缩放:
abs(1 - document.documentElement.clientWidth/window.innerWidth) <0.02
但这似乎在这里不起作用。
不幸的是,我们将不得不解决这个问题,因为我们调整大小的逻辑会重新格式化页面。此页面本质上是一个自定义在线报告,经常查看横向样式;我们不能只是告诉我们的用户不要缩放或旋转他们的手机;-)
有没有人遇到过这些问题?如果是这样,您是如何解决的?
顺便说一句:有没有人发现最新的 7.0.3 safari 更新有时不允许您清除 javascript 警报(即警报上的"确定"按钮不起作用,导致 safari 挂起)?我知道警报存在问题,该警报本应在iOS 7.0.3更新中修复,但也许还有其他我不知道的问题。当我们进入这种状态时,我们必须重新启动设备。
以下是我们如何使横向模式下的"页面跳转"消失。这不是一个"好"的解决方案,因为我们不知道它为什么有效。我们将视口元标记设置为以下内容:
<meta name="viewport" content="width=1920 height=1080"/>
我怀疑这些特定的数字是"魔术"——似乎只要同时指定宽度和高度,页面跳转就会消失。也许没有高度,根据导致页面重新布局的设备纵横比计算高度存在错误?(参见 Kamen Bundev 关于 http://www.kendoui.com/forums/kendo-ui-mobile/application/ios-7-safari-window-height-.aspx 年横向模式下错误报告的窗口高度的帖子;不幸的是,我没有找到任何其他引用此特定错误的内容)。
我们发现这个问题似乎与HTML并排布局的表格有关。我已经做过实验,只要视口宽度足够大,允许桌子彼此相邻,你很可能会看到这个错误。
- 如何缩放地图框传单中的标记单击事件
- 使用缩放脚本化事件绘制 HTML 图表
- 使用缩放javascript触发谷歌地图点击事件
- 谷歌地图API v3:缩放更改后是否有回调或事件侦听器
- 缩放更改了诺基亚此处地图的事件
- 缩放事件侦听器之前的 Javascript OpenLayers
- 像谷歌新闻一样的缩放事件
- 在 d3.js 中传播缩放事件
- 谷歌地图缩放事件
- 缩放事件传播未停止
- 如何在高图中缩放缩放事件的svg路径
- 在聚合物谷歌地图中缩放事件
- Openlayers-3:如何将缩放事件绑定到控件或文档
- 谷歌地图JavaScript API捏缩放事件
- 我们是否有办法对用户缩放事件做出反应
- 根据缩放事件更改amChart Serial中的dataProvider
- 在现有SVG上应用缩放事件(d3.js v4)
- 防止缩放事件中的d3平移值移动超出界限
- event.prventDefault();之后在iOS Safari上手动缩放事件处理;
- 如何保持浏览器的缩放和使用hammer.js的缩放事件