移动端1px解决方案

神奇大叔

已于 2023-01-31 20:11:23 修改

阅读量1.8k

点赞数 2

分类专栏：移动端与REM 文章标签：前端

于 2021-12-01 18:59:37 首次发布

本文链接：https://blog.csdn.net/weixin_43294560/article/details/121661948

版权

移动端与REM 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

文章目录

产生原因
通过dpr控制缩放比例
小数值px
meta标签+dpr
css scale
linear-gradient
box-shadow
svg

产生原因

一般来说,在桌面的浏览器中,设备像素比（dpr）等于1,一个css像素就是代表的一个物理像素。
而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。
故css设置1px,实际产生的物理像素会变大,使得1px的效果更大

通过dpr控制缩放比例

@media all and (-webkit-min-device-pixel-ratio: 2) {
    .scale::after {
        display: block;
        content: '';
        border-bottom: 1px solid #000;
        transform: scaleY(.5);
    }
}

@media all and (-webkit-min-device-pixel-ratio: 3) {
    .scale::after {
        display: block;
        content: '';
        border-bottom: 1px solid #000;
        transform: scaleY(.333);
    }
}

小数值px

存在局限性：iOS 8及以上，苹果系统支持，但是 iOS 8以下和 Android（部分低端机），会将0.5px 显示为 0px

<body>
    <div id="main" style="border: 1px solid #000000;"></div>
</body>
<script type="text/javascript">
    if (window.devicePixelRatio && devicePixelRatio >= 2) {
        var main = document.getElementById('main');
        main.style.border = '.5px solid #000000';
    }
</script>

meta标签+dpr

手淘采用这这种方案使用Flexible实现手淘H5页面的终端适配详情

在devicePixelRatio=2设置meta
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio=3设置meta
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

//通过js
const dpr = window.devicePixelRatio
const meta = document.createElement('meta') // 创建meta视口标签
meta.setAttribute('name', 'viewport') // 设置name为viewport
meta.setAttribute('content', `width=device-width, user-scalable=no, initial-scale=${1/dpr}, maximum-scale=${1/dpr}, minimum-scale=${1/dpr}`)

css scale

如果在一个元素上使用scale时会导致整个元素同时缩放，所以应该在该元素的伪元素下设置scale属性。

.scale::after {
    display: block;
    content: '';
    border-bottom: 1px solid #000;
    transform: scaleY(.5);
}

linear-gradient

利用白色背景障眼法

div.linear::after {
    display: block;
    content: '';
    height: 1px;
    background: linear-gradient(0, #fff, #000);
}

box-shadow

Safari下不支持

div.shadow {
    box-shadow: 0 0.5px 0 0 #000;
}

svg

SVG的描边等属性的1px是物理像素的1px

//火狐需要把svg颜色用black英文表示，不支持其他颜色表示方式
.svg::after {
    display: block;
    content: '';
    height: 1px;
    background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1px"><line x1="0" y1="0" x2="100%" y2="0" stroke="#000"></line></svg>');
}

//svg也可用base64表示
.svg::after {
    display: block;
    content: '';
    height: 1px;
    background-image: url('data:image/svg+xml;utf-8,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjFweCI+PGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iMTAwJSIgeTI9IjAiIHN0cm9rZT0iYmxhY2siPjwvbGluZT48L3N2Zz4=');
}

神奇大叔

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
移动端1px解决方案

原因: 一般来说,在桌面的浏览器中,设备像素比（dpr）等于1,一个css像素就是代表的一个物理像素。而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。故css设置1px,实际产生的物理像素会变大,使得1px的效果更大1、小数值px<body> <div id="main" style="border: 1px solid #000000;"></div>&l
复制链接

扫一扫