有没有一种方法可以响应用户的缩放事件？

Question

当我们访问苹果网站：sbsstatic/maintenance.html?start=0&tstart=0">https://discussions.apple.com/sbsstatic/maintenance.html?start=0&tstart=0时，如果我们进行一些缩放（Ctrl + 和 Ctlr -0），我们可以看到顶部栏在缩放时具有滑动效果。 有人知道如何实现这个想法吗？

- Pacerier

Answer 1

HTML5中甚至没有onzoom事件：

http://www.w3schools.com/html5/html5_ref_eventattributes.asp

一种检测缩放级别变化的方法是利用百分比值不会被缩放这一事实。百分比值相对于视口宽度，因此不受页面缩放的影响。如果插入两个元素，一个使用百分比位置，一个使用相同位置的像素，当页面缩放时它们将分开移动。找到两个元素位置之间的比例，就可以得到缩放级别。

http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128

- Jacek Kaniuk

---

w3fools没有在eventattributes页面中列出任何错误。除此之外，w3schools就像其他任何来源一样。它并没有什么特别的问题。 - Jacek Kaniuk

@Jacek，你是在说我们运行一个无限循环来进行检查吗？ - Pacerier

@Pacerier 是的，可以使用setTimeout。 - Jacek Kaniuk

@Jacek，为什么你在这种情况下选择了setTimeout而不是setInterval？ - Pacerier

@Pacerier - 错误了，我在想setInterval。 - Jacek Kaniuk

Answer 2

这是使用一些CSS动画技巧。这里有一个教程在这里。

这是上述教程中将为您提供所需效果的样式示例：

<div style="-webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2);">...</div>

你可以在 这里 查看他们的“增强版”样式表，它会解决这个问题。

- Timbo

---

但这与我缩放有什么关系呢？ - Pacerier

@Pacerier，你的问题是关于苹果事情如何工作的……据我所知，这正是它的工作原理，所以对回答进行负投票可能有点过分了。上面的CSS创建了一个div，它会随着你的缩放级别而改变。查看我链接的教程……向下滚动，查看框并进行缩放。同样的效果以非常简单的方式呈现。 - Timbo

@Pacerier 没问题，没关系，没有其他评论，所以不知道为什么有人会这样做……我以为我回答了问题！:) 你对这个CSS技巧的工作方式满意吗？它非常酷，而且Apple已经做出了我见过的最好的实现…… - Timbo

Answer 3

是的！

是的，编写键盘事件处理程序或使用类似以下链接提供的库: http://www.openjs.com/scripts/events/keyboard_shortcuts/

- user529649