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

Fakefish
  • 4.3k

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

回复
阅读 10.6k
3 个回答
Humphry
  • 16.4k

缩放是这样被触发的:

桌面端

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

移动端

  • 捏合/扩大手势
    (优先级最高,但可能被meta查询里viewport的minimum-scalemaximum-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.availWidthscreen.availHeight。因此,保证用户全屏的情况下,保证对应的CSSOM是正确的情况下,可以通过这个公式算出来(大致)正确的比例:screen.availWidth/window.innerWidth

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


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

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

按F11,可以进入全屏。

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

wefiy
  • 1
新手上路,请多包涵

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

狗屌
  • 1.7k
$(document).ready(function () {
    var theWindow = $(window);

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