移动端适配之viewport适配
前面说过了比例缩放适配,本来想直接介绍rem适配!还是补充一下这个viewport适配吧!其实这个viewport也归属于比例缩放适配的一种吧!
首先我们可以获取到当前设备的独立像素(window.screen.width),然后通过适配的像素比(dpr)还原其真实逻辑像素(物理像素),然后在其还原后的设备像素上进行适配.
那么这个viewport适配有什么问题呢?
缺点:
1.这个方法有时候不准确,比如某些时候dpr不是整数时候,比例缩放将出现误差,(比例缩放除以缩放比例)
2.像414独立像素渲染出来是1242的,但实际转换后是1080的,所有算出来不是标准的!
案例代码:
<script>
//自制行函数
(function() {
/*
* 375/ scalc=750
* 320/scalc=640
* 414/scalc=1242
* 缩放比例 scalc= 1/2
* 缩放比例 scalc= 1/2
* 缩放比例 scalc= 1/3
* scalc=1/dpr
*
*
*
*
* */
// var curWidth=window.screen.width;
// var tarWidth=375;
//缩放比例
var scalc=1/window.devicePixelRatio;
var meta=document.createElement('meta');
meta.name="viewport";
meta.content="initial-scale="+scalc+",minimum-scale="+scalc+",maximum-scale="+scalc+",user-scalable=no"
//将meta标签插入到head的子元素
document.head.appendChild(meta);
})()
</script>通过不同的设备比例以及,对于的物理像素关闭得出缩放的scalc=1/dpr,通过这个获取到的动态缩放比例来动态设置meta标签!(比例缩放时候讲过),尽管这样,也算尽量尽可能的去适配!随后继续介绍较为完美的rem布局适配方案!淘宝的布局方案,也算此种方式!不过适配的是dpr2.0的!
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-6-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
