CSS - 移动端 1像素解决办法

前言：在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的 移动端1px像素问题。

要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素]；

1物理像素：

移动设备出厂时，不同设备自带的不同像素，也称硬件像素；

2逻辑像素：

即css中记录的像素。

在开发中，为什么移动端CSS里面写了1px，实际上看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，UI设计师要求的1px是指设备的物理像素1px，而CSS里记录的像素是逻辑像素，它们之间存在一个比例关系，通常可以用 javascript 中的 windowdevicePixelRatio 来获取，也可以用媒体查询的 -webkit-min-device-pixel-ratio 来获取。当然，比例多少与设备相关。

在手机上border无法达到我们想要的效果。这是因为 devicePixelRatio 特性导致，iPhone的 devicePixelRatio==2，而 border-width: 1px; 描述的是设备独立像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

● 用::after和::befor,设置border-bottom：1px solid #000,然后在缩放-webkit-transform: scaleY(05);可以实现两根边线的需求

● 用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(05); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。

在命令行中输入“adb shell” ；进入shell之后，再输入“cat /system/buildprop  grep "product"”  设备信息主要是存放在“/system/buildprop”文件，通过“cat”命令就可以查看了。

：

adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb我们可以在Eclipse中方便通过DDMS来调试Android程序，说白了就是debug工具。

它的主要功能有:

运行设备的shell(命令行)

管理模拟器或设备的端口映射

计算机和设备之间上传/下载文件

将本地apk软件安装至模拟器或android设备

参考资料：

物理像素[设备像素] & 逻辑像素[CSS 像素]

拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 05。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的05px就好了啊！ 试过了就知道，iOS 8+系统支持，安卓系统不支持。

在浏览器中无法设置小于 1px 的边框 设置了也不会生效

设计师要求的 1px 是指设备的物理像素 1px，而 CSS 里记录的像素是逻辑像素，它们之间存在一个比例关系，可以用 javascript 中的 windowdevicePixelRatio 来获取。当然，比例多少与设备相关。

移动端开发常需要在 html 的 header 里添加如下一句：

设备像素比 = 物理像素 / css 像素

核心思想就是设置 1px 大小 然后将 1px 缩小为 05px 来展示

IOS8 下已经支持带小数的 px 值, media query 对应 devicePixelRatio 有个查询值-webkit-min-device-pixel-ratio, css 可以写成这样

缺点对设备有要求，小数像素目前兼容性较差。

pixel-bordercss 这个工具库就是用来解决移动端 1px 边框的问题，用到的思想和我下面写的一致

pixel-bordercss

该方案是对上述方案的优化，整体思路就是利用 viewport + rem + js 动态的修改页面的缩放比例，实现小于 1 像素的显示。在页面初始化时，在头部引入原始默认状态如下：

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

缺点以为缩放涉及全局的 rem 单位，比较适合新项目，对于老项目可能要涉及到比较多的改动。

可能你会问为什么在3倍屏下，不是03333px 这样的？经过我测试，在Chrome上模拟iPhone 8Plus，发现小于046px的时候是显示不出来。

分辨率又称显示分辨率或屏幕分辨率，它是指水平方向或垂直方向像素的数量。

iPhone6的分辨率是7501334，大小是47英寸。

通过 windowscreenwidth windowdevicePixelRatio 后者 windowscreenheight windowdevicePixelRatio 可以获取到分辨率。

物理像素也可以叫做 设备像素 。

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在 *** 作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

逻辑像素也可以叫做 设备独立像素 。

逻辑像素通常是指程序使用的虚拟像素(比如: css像素)。

物理像素和逻辑像素之间存在着一定的对应关系，这个关系叫做设备像素比。

设备像素比(dpr) 是指在移动开发中1个逻辑像素占用多少物理像素。

比如2代表1个css像素用2x2个设备像素来绘制。

让同一张，在不同大小、不同分辨率的屏幕显示大小保持一致。

如下图所示：

亚像素是指少于1px的像素。

如何补足少于1px的像素呢？

首先看一个例子，把iPhone4屏幕宽度进行将其七等分。

输出计算宽度与实际渲染宽度。

出现这个结果，是因为各个box宽度计算规则如下：

第六个box的大小缩减为457031-04845=452186px，因此舍入45px，合并到下一个节点宽度为02186px；

第七个box的大小扩大为457031+02186=459217px，因此舍入为46px；

这个计算规则来源于 webkit规定的Converting Subpixels to Pixels机制 ，即亚像素(即小数点像素)转换为真实物理像素的两种方法。

示意图如下：

>

以上就是关于CSS - 移动端 1像素解决办法全部的内容，包括:CSS - 移动端 1像素解决办法、如何用adb命令 获得Android手机分辨率、移动端 1px 边框的问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！