检测页面缩放

Question

我正在用Javascript编写一个网页。我必须以某种方式使用我的DIV图层属性来引用页面scalling。

我该怎么做？您可以在apple页面找到该示例。尝试缩放它并查看顶部菜单。

Answer 1

您应该为所有维度使用EM，因此所有元素都将缩放（仅在启用字体大小缩放时）。因此，您可以测量元素的字体大小，以便知道文本缩放是否已修改。

无法知道页面是否被浏览器缩放（正如我所写，只有在使用文本缩放时）

这是一个workaroud：它只有在缩放font-size时才有效 http://jsfiddle.net/gGdAq/4/

基本上，如果您感兴趣的元素的Pixel宽度不是基本字体大小*，则页面中的宽度会被缩放。

也许这个问题会有所帮助： Catch browser's "zoom" event in JavaScript

Answer 2

编辑：我认为缩放意味着重新调整窗口大小。你的意思是放大和缩小，我的坏。

---

苹果网站上的顶级菜单是固定的，并且不会随着浏览器窗口的重新调整而缩放。如果您想拥有该功能，则必须指定：

div {
    width: %; //percentage value you want
    min-width: px; //the minimum pixel value you want
}

这种方式随着页面宽度的增加而扩展和缩小，同时保持最小宽度以便于阅读

此外，将em用作font-size也有助于保持文字大小的动态。

Answer 3

您几乎可以在任何网站上遇到此（或类似）行为。没有在任何其他浏览器中测试它，但here是我对firefox相同问题的答案。