浏览器窗口onresize+css3实现无错位缩放

2014-01-12 3,695 2 技术 大超超。

在缩放后的浏览器窗口里测试wap版页面时打开QQ邮箱,偶然看到QQ邮箱的界面在小窗口里自动缩放了,理论上以100%显示的QQ邮箱会占用至少650px宽(经过不断地resize缩放浏览器实测),在340px的浏览器窗口里缩放了约0.523倍(340除以650计算的结果)。

写到这儿就不得不感慨腾讯在做产品时细节的把握,真的是把用户体验做到极致,给32个赞!

简单实现思路:用javascript监听window.onresize事件,实时获取缩放的宽度值,当宽度值到了给定的阈值时开始改变body标签的scale值(=当前窗口宽/给定的阈值),从而实现整个UI界面无错位。

有个改变body标签scale的例子代码(参考下面给出的文章):

var size = 1.0;
function zoomout() {
    size = size + 0.1;
    set();
}
       
function zoomin() {
    size = size - 0.1;
    set();
}
       
function set() {
    document.body.style.cssText = document.body.style.cssText + '; -webkit-transform: scale(' + size + '); ';
}

监听window.onresize的代码有兴趣的同学可以研究一下,暂时没有应用场合就先不研究了。

参考一篇文章:用CSS3实现浏览器的缩放功能

里面有个图片在这儿贴出来,更形象~

 



声明: 本文由大超超。原创编译,转载请保留链接: http://www.thinkful.cn/archives/382.html