Retina 屏移动设备 1px解决方案

做移动端H5页面开发时都会遇到这样的问题，用 CSS 定义 1px 的实线边框，在 window.devicePixelRatio=2 的屏幕上会显示成 2px，在 window.devicePixelRatio=3 的屏幕上会显示成 3px，明明希望是极细的线条，到 Retina 屏上却变得粗大丑陋。这是因为 CSS 中的 px 单位定义的是逻辑像素值，而实际显示的效果会以物理像素呈现，Retina 屏幕的物理像素值和逻辑像素值不同就造成了这种差异。

如果想让 HTML5 页面像 Native App 一样在 Retina 屏幕上显示 1 物理像素的实线，该如何实现呢？

方案一设置 border-width: 0.5px

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

遗憾的是只有iOS 8+ 和 OS X 支持 0.5px

但是在ios7以下，android等其他系统里，0.5px会被显示为0px，即该解决方案需要写hack兼容老旧系统。

解决方案是在head部分添加一段 JavaScript代码检测浏览器能否支持0.5px的边框，如果支持0.5px设置，给<html>元素添加个class。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}

.item {
    border: 1px solid #ccc;
}
.hairlines .item {
    border-width: 0.5px;
}

那ios7以下和其它android机下怎么解决这个问题？个人建议是：渐进增强 , 维持老样，不去处理，随着时间的推移，Retina屏最终都会支持0.5px 和 0.3 px边框的。

1、通过viewport + REM的方式来兼容。

目前这种兼容方案相对比较完美，适合新项目。

在devicePixelRatio = 2 时，输出viewport

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，输出viewport

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

同时通过设置对应viewport的rem基准值，这样就可以像以前一样设置1px了。

2、 transform: scale(0.5)

单条边框的实现方式

height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;

只能单独使用，如果嵌套，scale的作用也会对包含的元素产不想要的影响，所以此种方案配合:after和:before独立使用较多，比如画一个商品的边框四条线，容器的after和before可以画2条线，利用容器的父元素的after、before再画2条线。

.after-scale{
    position: relative;
}
.after-scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #c8c7cc;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

3、 box-shadow

实现方式

利用css 对阴影处理的方式实现0.5px的效果

底部一条线

-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5)

优点
基本所有场景都能满足，包含圆角的button，单条，多条线，

缺点

颜色不好处理，黑色 rgba(0,0,0,1) 最浓的情况了。有阴影出现，不好用。

4、 background-image

实现方式

设置1px通过css 实现的image，50%有颜色，50%透明

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

优点

配合background-image,background-size,background-position 可以实现单条，多条边框。边框的颜色随意设置

缺点：如果有圆角的效果，圆角的地方没有线框的颜色。要写的代码也不少

5、用图片

.border-image{
    border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}

缺点：也可以通过修改图片来达到圆角的效果，但是由于图片的原因，压缩过后的图片边缘变模糊了（不放大的情况下不明显），需要引用图片或者base64，边框颜色修改起来不方便。

posted @ 2016-04-20 21:33 孤舟蓑翁阅读(630) 评论(0) 编辑收藏举报

刷新页面返回顶部

孤舟蓑翁