扫码关注官方订阅号
意外在空间发现有这么个功能。 还有怎么缩放回去?
学习是最好的投资!
缩放是这样被触发的:
minimum-scale
maximum-scale
initial-scale
<meta name="viewport" content="initial-scale=1.0">
桌面端中,ctrl+0则可以回到100%的缩放比例。
QQ空间是用flash来做的。
源代码全局搜索top_tips_container(chrome inspector,键入ctrl+shift+f)。发现对应代码在accessory.js中,再搜zoomDetect,然后就可以看到相对应的flash的嵌入过程了:
top_tips_container
zoomDetect
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("p", document.body, false, { id: "_qz_zoom_detect", style: "position: absolute; right: 0px; bottom: 0px; visibility: visible;" }); cnt.innerHTML = swf }
感谢@woody,在stackoverflow上找到了各种hack的结合方案,可以一用。至于优雅不优雅,简洁不简洁什么的,已经管不上了:
http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers
下列内容需要viewport的相关知识:两个viewport的故事(第一部分)
缩放比例可以这么计算:缩放比例=设备像素÷CSS像素。
缩放比例
设备像素
CSS像素
重点在于,CSSOM里大部分量都是反映CSS像素的,哪一个量会忠实反应设备像素呢?(据我所知),只有screen.availWidth和screen.availHeight。因此,保证用户全屏的情况下,保证对应的CSSOM是正确的情况下,可以通过这个公式算出来(大致)正确的比例:screen.availWidth/window.innerWidth
screen.availWidth
screen.availHeight
screen.availWidth/window.innerWidth
对于桌面端,没有几个桌面端用户会愿意进入页面时全屏然后突然又变成窗口化,或者始终全屏。同时全屏的浏览器API的覆盖面也不够全。 对于默认全屏的移动端,反而比桌面端更加容易算出缩放比例,尽管移动端的一些浏览器有很严重的错算。
下面是一些CSSOM的测试,你可以打开http://jsfiddle.net/humphry/3rcZE/show缩放试试。
http://jsfiddle.net/humphry/3rcZE/show
http://jsfiddle.net/humphry/3rcZE/
按F11,可以进入全屏。
最后:看看CSSOM的兼容性。你可以知道用CSSOM来判断页面缩放比例有多大问题了……
用一个flash就可以检查出来,参考QQ空间
$(document).ready(function () { var theWindow = $(window); function resized() { alert('被缩放了!'); } theWindow.resize(function () { resized(); }).trigger('resize'); });
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
缩放是这样被触发的:
桌面端
移动端
(优先级最高,但可能被meta查询里viewport的
minimum-scale
、maximum-scale
相关设置限制)initial-scale
相关设置<meta name="viewport" content="initial-scale=1.0">
(优先级其次)
(优先级最低)
桌面端中,ctrl+0则可以回到100%的缩放比例。
FLASH方案
QQ空间是用flash来做的。
源代码全局搜索
top_tips_container
(chrome inspector,键入ctrl+shift+f)。发现对应代码在accessory.js中,再搜zoomDetect
,然后就可以看到相对应的flash的嵌入过程了: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来判断页面缩放比例有多大问题了……
用一个flash就可以检查出来,参考QQ空间