移动端一像素四种解决方案

移动端的问题

样式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

移动端一像素四种解决方案

移动端的问题

猜你喜欢