意外在空间发现有这么个功能。
还有怎么缩放回去?
缩放是这样被触发的:
桌面端
- 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来判断页面缩放比例有多大问题了……
$(document).ready(function () {
var theWindow = $(window);
function resized() {
alert('被缩放了!');
}
theWindow.resize(function () {
resized();
}).trigger('resize');
});
用一个flash就可以检查出来,参考QQ空间