移动端布局适配方案解决retina（视网膜）屏1px边框的问题

下面我给大家分享一下移动端布局的要领，和解决1px边框的问题：


viewport使用

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />

width：设置layout viewport 的宽度，为一个正整数，或字符串"device-width"

initial-scale：设置页面的初始缩放值，为一个数字，可以带小数

minimum-scale：允许用户的最小缩放值， 为一个数字，可以带小数

maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数

height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用

user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

format-detection使用

<meta name=“format-detection” content=“telephone=no,email=no,date=no,address=no” />

telephone：电话
eamil：邮箱
date：日期
address：地址

移动端如何做适配？

采用rem作为布局单位。

什么是rem?

rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。
简单可理解为屏幕宽度的百分比。

rem与em的区别？

rem是针对根元素的html的font-size计算值大小计算的。
em是根据父元素的font-size大小计算的。

使用手淘flexible.js计算rem

比如：750px设计稿，那么1rem=75px， div的高是50px ，50px换算成rem公式：
50px/75px=0.7rem;

解决1px细线问题

问题出现原因：

在retina（视网膜）屏上面， devicePixelRatio（物理像素）这个值是2或3， 所以1px长度映射到物理像素上就有2px或3px那么长。

解决方案：

viewport + rem 方案

<meta name=“viewport” content=“initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no” />

接下来的任务就是js的动态修改缩放比 以及 实现rem根元素字体大小的设置。

var viewport = document.querySelector("meta[name=viewport]");
if (window.devicePixelRatio == 1) {
     viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
}
if (window.devicePixelRatio == 2) {
      viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
}

if (window.devicePixelRatio == 3) {
     viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

面试解答：

判断devicePixelRatio物理像素如果为1，设置viewport缩放大小为1，如果为2设置viewport缩放大小为0.5，如果为3设置viewport缩放大小为0.33….。