文章内容
2017/11/3 17:09:56,作 者: 黄兵
页面缩放
最近在写手机网站的时候，遇到要适配各种屏幕的情况。使用媒体查询很麻烦，之后参考了一下其他的网站，使用的是viewport缩放。
<meta name="viewport" content="width=375, user-scalable=no, target-densitydpi=device-dpi">
在写网页的时候设置375px的宽度，之后设置viewport。
还有一种方法是body缩放，使用的是transform.scale(x,y)，但是效果不是很好，代码如下：
var viewportWidth=document.getElementsByTagName('body')[0].offsetWidth;
var scale=viewportWidth/375;
document.body.style.transform = 'scale(' + scale + ')';
document.body.style['-o-transform'] = 'scale(' + scale + ')';
document.body.style['-webkit-transform'] = 'scale(' + scale + ')';
document.body.style['-moz-transform'] = 'scale(' + scale + ')';
console.log(scale);
参考资料：
Changing page scale via javascript
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - 页面缩放
评论列表