130、如何解决移动端0.5px的问题

最新推荐文章于 2023-06-25 10:42:29 发布

C.&H.

最新推荐文章于 2023-06-25 10:42:29 发布

阅读量1.2k

点赞数

分类专栏：前端面试题目文章标签： css html5 html

本文链接：https://blog.youkuaiyun.com/sunnnnh/article/details/120827615

版权

前端面试题目专栏收录该内容

136 篇文章

订阅专栏

1、移动端边框变粗的原因？

在浏览器端1px线看起来的确很细,但一旦放在手机上,就显得很粗,原因如下:

在移动端，1px 的直线在物理屏幕上通常会显示成 2px（甚至更粗）。这是因为手机屏幕的物理分辨率（硬件支持的）通常是其逻辑分辨率（软件支持的）的数倍。因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css像素与设备像素比：devicePixelRatio = 物理像素 / 独立像素。

以 iPhone 6 为例，其逻辑分辨率为 667×375 ，物理分辨率为 1334x750 。这意味着物理屏幕使用 2x2 个像素点显示 1 像素的内容。换言之，如果我们希望在物理屏幕上显示 1 像素的边框，就必须在逻辑上实现 0.5 像素的边框。 除了 iPhone（iOS8以上），目前绝大多数的移动设备并不支持直接渲染 0.5px 的边框，都会把0.5识别为0，即无边框状态。

2. 如何实现移动端的1px？

使用transform: scale(.5, .5);


        /*设置边框（使得浏览器和移动端都可实现1px）*/
        .a {
            height: 100px;
            border: 1px solid #f00;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scale(.5, .5);
            transform: scale(.5, .5);
        }

       <div class="a"></div>

参考：吃透移动端 1px｜从基本原理到开源解决方案 - 知乎

transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点。参考：transform 属性之 transform-origin_u011848617的专栏-优快云博客_transform-origin