移动端1px像素问题及解决办法

2,129 阅读7分钟

在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题。首选先看一下,pc时代和移动端时代对1px的对比。

一、像素的理解

像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时,屏幕能显示的画面的过渡更细致,网站看起来更明快。

1、device pixels

设备像素:显示屏幕的最小物理单位,每个dp包含自己的颜色、高宽等,不可再细分。设备像素是在设备出厂是设定的,设备一旦造出来就不会变大小和数量。官方在产品说明书上写的1920x1080就是说的物理像素。

2、dpi

设备独立像素:dpi(Dots Per Inch,每英寸点数)是一个量度单位,指每一英寸长度中,取样、可显示或输出点的数目。每英寸的像素,类似于密度,即每英寸的像素点数量。

3、css pixels

就是CSS和JS所理解的像素单位,它跟设备屏幕的像素没必然关系,比如windows的桌面显示器,当你修改显示器的硬件分辨率,比如把1920的分辨率改成1024分辨率,你会发现网页里的图形和字体变得很大很大的,同样的显示器,原本能显示全部网页,现在只能显示一半宽度,也就是说CSS像素变大了。所以,CSS像素是可以被硬件和软件任意调节的单位。css像素是独立于设备逻辑的,用于逻辑上衡量像素的单位。CSS声明和几乎所有的javascript属性都使用CSS像素。

// 逻辑像素px
width: 250px;
font-size: 22px;

4、dpr

设备像素比dpr = 设备像素 / CSS像素(某一方向上) 可以通过window.devicePixelRatio获取设备的dpr值。一般来说,在桌面的浏览器中,设备像素比(dpr)等于1,一个css像素就是代表的一个物理像素。而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。即我们通常在css中设置的width:1px,对应的便是物理像素中的2px。手机机型不同,dpr可能不同。

以iphone5为例,iphone5的CSS像素为320px*568px,DPR是2,所以其设备像素为640px*1136px

640(px) / 320(px) = 2
1136(px) / 268(px) = 2
640(px)*1136(px) / 320(px)*568(px) = 4

5、DP(device pixels)

设备像素(物理像素),顾名思义,显示屏是由一个个物理像素点组成的,通过控制每个像素点的颜色,使屏幕显示出不同的图像,屏幕从工厂出来那天起,它上面的物理像素点就固定不变了,单位pt。

pt在css单位中属于真正的绝对单位,1pt = 1/72(inch),inch及英寸,而1英寸等于2.54厘米。

6、视口viewport

浏览器上(或者app中的webview)用来显示网页的那部分区域。业内总结出三个子概念。

  • 布局视口 layout viewport:

    手机一般为了容纳为桌面浏览器设计的网站,默认布局viewport宽度远大于屏幕的宽度,为了让用户看到网站全貌,缩小网站。例如,apple一般将viewport宽度定为980px。主要意义是手机厂商不至于让自家手机变得可笑,在打开大于980宽度的页面的时候可以横向拖动,而不至于挤成一团。可以通过document.documentElement.clientWidth来获取。

  • 视觉视口 visual viewport:

    屏幕的可视区域,即物理像素尺寸,可以通过window.innerWidth来获取。对于iPhone 6 Plus来说,在加了著名代码前提下,值是414px,不加的话,值是980px,著名代码如果改一改width=device-width, initial-scale=1.5,这时值是276px。所以它是一个可变的值。

  • 理想视口 ideal viewport:

    最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度

    为了让viewport能够等于ideal viewport,一般我们会添加meta标签。width=device-width,initial-scale=1.0的时候,视觉视口的大小。对于iPhone 6 Plus来说,是固定值414px。所以,理想视口就等于设备宽度。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<!--width=device-width:宽度为设备宽度-->
<!--initial-scale:缩放比为1-->
<!--user-scalable=no:是否允许用户自定义缩放-->

二、移动端1px解决方案

1、小数值px

解决思路

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

优点:

  • 简单,好理解

缺点:

  • 容性差,目前之余IOS8+才支持,在IOS7及其以下、安卓系统都是显示0px。

2、border-image

使用的背景图片

\

代码:

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url(border.png) 2 0 stretch;
    border-image: url(border.png) 2 0 stretch;
}

优点:

  • 图片可以用gif, png, base64多种格式, 以上是上下左右四条边框的写法, 需要单一边框只要定义单一边框的border, 代码比较直观.

缺点:

  • 大小、颜色更改不灵活
  • 放到PS里面看边框,是有点模糊的(因为带有颜色部分是1px,在retina屏幕上拉伸到2px肯定会有点模糊)

3、background-img渐变

设置1px的渐变背景,50%有颜色,50%透明

.border {
    background:
    linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
    linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
    linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
    linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;
}

4、CSS3 box-shadow

.shadow {
    -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
    box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
}

模拟效果:没觉得这个方法好用,模拟的效果差强人意,颜色也不好配置,不推荐

5、viewport和rem结合

viewport结合rem解决像素比问题

比如在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">

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

6、:before:after和transform

原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。

单条border样式设置:

.scale-1px{
     position: relative;
     border:none;
 } 
.scale-1px:after{
     content: '';
     position: absolute; 
     bottom: 0; 
     background: #000; 
     width: 100%; 
     height: 1px;
     -webkit-transform: scaleY(0.5); 
     transform: scaleY(0.5); 
     -webkit-transform-origin: 0 0; 
      transform-origin: 0 0; 
}

四条border样式设置:


.scale-1px{ 
    position: relative; 
    margin-bottom: 20px; border:none;
} 
.scale-1px:after{ 
    content: ''; 
    position: absolute;
    top: 0; 
    left: 0;
    border: 1px solid #000; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 200%; 
    height: 200%; 
    -webkit-transform: scale(0.5); 
    transform: scale(0.5); 
    -webkit-transform-origin: left top; 
    transform-origin: left top; 
}

结合js来代码来判断是否是Retina屏

if(window.devicePixelRatio && devicePixelRatio >= 2){
    document.querySelector('div').className = 'scale-1px';
}

优点:

  • 所有场景都能满足
  • 支持圆角

缺点:

  • 对于已经使用伪类的元素,可能需要多层嵌套

总结

  1. 0.5px,相信浏览器肯定是会慢慢支持的;目前而言,如果能用的话,可以hack一下;
  2. 阴影,border-img的方案不建议使用
  3. 背景图片和缩放可以在项目中配合使用,如单个线条使用缩放,四条框用背景图片模拟,额,如果要圆角的话,无能无力了
  4. 建议采用transform和伪类