1像素底边框触发应用移动设备像素比

实现1像素底边框。一般的处理方式是：border-bottom:1pxsolidcolor，这种处理方式在PC端显示一个1px的底边框，但是放在移动端不是1px，可能是2px，或者1.5px等，出现这种情况的原因是不同的移动设备min-device-pixel-ratio的值不同，以iphone8为例，它的min-device-pixel-ratio值为2，如果一个元素的底边框的写法是：border-bottom:1pxsolidcolor，即PC端显示1px的底边框时，What在iphone6中显示的不是1px，而是2px（喜欢我的文章欢迎评论，欢迎Star~。欢迎关注我的github博客）。

先看效果图

从上面的效果可以看出区别，直接border-bottom:1px纯色，用手机浏览不是1px，说说怎么实现移动端1像素在下边框，先介绍device-pixel-ratio的相关知识

先说一个关键技术：retina，一种新的高像素比分辨率显示技术，是苹果公司提出的，可以将更多的像素点压缩到一块屏幕中，从而达到更高的分辨率，提高屏幕显示的精细度。目前大多数设备都在使用该技术。该分辨率在正常观看距离下足以使人眼无法区分单个像素。也称为Retina显示器（device-pixel-ratio>1）

device-pixel-ratio=物理像素/设备无关像素（某??个方向，水平轴或垂直轴），即所谓设备像素比，是指设备的物理像素与独立像素的比值物理像素：我们说的分辨率，比如iphone8的分辨率750x1334px独立像素：设备的实际窗口，比如iphone8375x667pxiphone8的窗口device-pixel-ratio=750/375=2

device-pixel-ratio值1对于没有视网膜显示的设备，device-pixel-ratiofordeviceswithretinadisplayThevalueis2

Thedevice-pixel-ratiovalueofdeviceswithoutretinadisplays值为2

Thedevice-pixel-ratiovalueofdeviceswithoutretinadisplaysis1,andthedevice-pixel-ratiovalueofdeviceswithretinadisplaysis1.5or3(generaldevicepixelratioForthis2values)