移动端显示的宽度为多少像素,移动端1像素

移动端的问题

样式reset统一标签样式呈现效果
300ms点击延迟问题：FastClick.attach(document.body, fastclick是个插件，解决移动端300ms延迟问题)

移动端的一像素边框问题
即在移动端的CSS写了1px，实际上显示会比1px粗。
border: solid 1px;
在移动端的HTML的header中添加下述代码，意思是本页面的viewport宽度为设备宽度，初始缩放值和最大缩放值是1，禁止用户缩放。
< meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
移动端的window对象有个devicePixelRatio属性=设备像素 / css像素。UI设计稿中要求的是设备物理像素，但是在CSS中表示的不是物理像素。

解决方案：
参考border. css： https://www.cnblogs.com/cckui/p/9267534.html
参考： https://www.jianshu.com/p/fa670b737a29

利用media查询设置小数像素 .border {border: 1px solid #eee}@media screen and (-webkit-min-device-pixel-ratio: 2) { .border {border: 0.5px solid #eee}}@media screen and (-webkit-min-device-pixel-ratio: 3) { .border (border: 0.33333px solid #eee)}

缺点： 对设备有要求，且目前的兼容性比较差

viewport+rem+js
在移动端的开头设置meta标签如下 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

然后利用JS来获取meta元素，对window.devicePixelRatio属性进行判断，再对其中的content属性进行重新设置。

var viewport = document.querySelector("meta[name=viewport]");if(window.devicePixelRatio==1){ viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');}if(window.devicePixelRatio==2){ viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=no');}if(window.devicePixelRatio==3){ viewport.setAttribute('content', 'width=device-width, initial-scale=0.3333333, maximum-scale=0.3333333,, user-scalable=no');}var docEl = document.documentElement;var fontsize = 10 * (docEl.clientWidth / 320) + 'px'; docEl.style.fontSize = fontsize;

var fontsize = 10 * (docEl.clientWidth / 320) + ‘px’，是设置HTML的font-size的大小的，单位是px。documnet.body.clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变.
首先浏览器一般默认是16px=1rem，1px=1/16rem=0.0625rem，
设置HTML标签的font-size的大小10px（默认大部分浏览器为16px），页面其他标签可以通过设置rem为HTML的倍数来实现适配。

那么怎么将设计稿的单位转化为rem呢？
屏幕根据设计稿的比例转换对应的rem值，比如：

320的设置 = 10(clientWidth/320)* 以320宽，10px作为基准，其中clientWidth在iPhone5或5S下是320px,iPhone6下是375px,iPhone6P下是414px等等。
640的设置 = 20*(clientWidth/320) 也是这样以320为基准。

transform: scale(0.5)方案 div::after{ content:''; width:100%; border-bottom:1px solid #000; transform: scaleY(0.5);} .div::after { content: ''; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border: 1px solid #bfbfbf; border-radius: 4px; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); -webkit-transform-origin: top left;} 媒体查询media+transform实现 @media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }}/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }}

可参考：https://www.jianshu.com/p/5ff121936666