页面如何检测到屏幕被缩放？

Question

意外在空间发现有这么个功能。
还有怎么缩放回去？

Answer 1

缩放是这样被触发的：

桌面端

• ctrl++
• ctrl+-
• ctrl+鼠标滚轮
• Mac的捏合/扩大手势

移动端

• 捏合/扩大手势
  （优先级最高，但可能被meta查询里viewport的minimum-scale、maximum-scale相关设置限制）
• 第一次进入页面（时机待考），meta查询，initial-scale相关设置
  <meta name="viewport" content="initial-scale=1.0">
  （优先级其次）
• 第一次进入页面（时机待考，应该是在DOM ready前后），当布局视口宽度大于设备宽度时
  （优先级最低）

桌面端中，ctrl+0则可以回到100%的缩放比例。

FLASH方案

QQ空间是用flash来做的。

源代码全局搜索top_tips_container（chrome inspector，键入ctrl+shift+f）。发现对应代码在accessory.js中，再搜zoomDetect，然后就可以看到相对应的flash的嵌入过程了：

function() {
    var swf = QZONE.media.getFlashHtml({
        "src": "http://" + imgcacheDomain + "/qzone/v6/accessory/plugin/zoom.swf",
        "width": "10",
        "height": "10",
        "allowScriptAccess": "always",
        "id": "accessory_zoom",
        "name": "zoom_detect",
        "wmode": "transparent",
        "scale": "noScale"
    }),
        cnt = QZFL.dom.createElementIn("div", document.body, false, {
            id: "_qz_zoom_detect",
            style: "position: absolute; right: 0px; bottom: 0px; visibility: visible;"
        });
    cnt.innerHTML = swf
}

CSSOM方案

感谢@woody，在stackoverflow上找到了各种hack的结合方案，可以一用。至于优雅不优雅，简洁不简洁什么的，已经管不上了：

http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers

CSSOM计算缩放比例的相关困难

下列内容需要viewport的相关知识：两个viewport的故事（第一部分）

缩放比例可以这么计算：缩放比例=设备像素÷CSS像素。

重点在于，CSSOM里大部分量都是反映CSS像素的，哪一个量会忠实反应设备像素呢？（据我所知），只有screen.availWidth和screen.availHeight。因此，保证用户全屏的情况下，保证对应的CSSOM是正确的情况下，可以通过这个公式算出来（大致）正确的比例：screen.availWidth/window.innerWidth

对于桌面端，没有几个桌面端用户会愿意进入页面时全屏然后突然又变成窗口化，或者始终全屏。同时全屏的浏览器API的覆盖面也不够全。
对于默认全屏的移动端，反而比桌面端更加容易算出缩放比例，尽管移动端的一些浏览器有很严重的错算。

---

下面是一些CSSOM的测试，你可以打开http://jsfiddle.net/humphry/3rcZE/show缩放试试。

http://jsfiddle.net/humphry/3rcZE/

按F11，可以进入全屏。

最后：看看CSSOM的兼容性。你可以知道用CSSOM来判断页面缩放比例有多大问题了……

Answer 2

用一个flash就可以检查出来，参考QQ空间

Answer 3

$(document).ready(function () {
    var theWindow = $(window);

    function resized() {
        alert('被缩放了!');
    }
    theWindow.resize(function () {
        resized();
    }).trigger('resize');
});