Webapp中1px边框在retina屏中变粗的问题

转载 2017年01月03日 11:05:33

最近在做一个webapp, 给边框设置了1px的大小, 结果同时在1080P的手机中打开并截图后用PS无限放大, 发现边框并不是1px大小, 而是变成了3px的大小. 其实这是因为手机的dpr在作祟, 在超高清屏(dpr=3)的情况下会用3dp的大小去渲染1px的内容, 因此1px的边框在超高清手机上会被拉伸成3px, 这个问题是需要解决的.

还好,时代总是进步的。也许很多人都不知道, 现在IOS8下,已经支持0.5px了。。 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码:


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

三种方案:

1、JS判断UA,是否是ios8+,是的话则输出类名hairlines,为了防止重绘,这段代码加在head里即可。

if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
	var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/),
		version = parseInt(v[1], 10);
	if(version >= 8){
		document.documentElement.classList.add('hairlines')
	}
}

2、JS判断是否支持0.5px边框,是的话,则输出类名hairlines。

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);
}
// This assumes this script runs in <body>, if it runs in <head> wrap it in $(document).ready(function() {   })

相比于第一种方法,这种方法的可靠性更高一些,但是需要把js放在body标签内,相对来说会有一些重绘,个人建议是用第一种方法。

3、服务端做ios版本判断,输出相应的类名

相比于JS的实现,个人更倾向于在服务端完成,这样前端也少几行代码,并且更加可靠。

如在wormhole里的实现(wormhole是nodejs环境下的一个服务端渲染模版的容器)

{{#if($plugins.detector.os.name === "ios" && $plugins.detector.os.version >= 8)}}
    {{set (hairlines = "hairlines")}}
{{/if}}
<html class="{{hairlines}}">

加上类名后,就可以针对该类名写相应的css了。比如:

div{border:1px solid #000}
.hairlines div{border-width:0.5px}

也许你会问,那ios7以下和其他android机下怎么搞?我的建议是:还是维持老样,不去处理,随着时间的推移,我相信最终都会支持0.5 和 0.3 px边框的。

如果硬要兼容,怎么整?方案也有很多,稍微介绍下:

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

目前这种兼容方案相对比较完美,适合新项目(老项目改用REM单位成本会比较高)。 淘宝M首页 就是这种方案。

在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了。关于REM布局,可以参考下我上一篇文章 《移动端H5页面之iphone6的适配》

其他方案(该部分内容来源于妙净同学的分享):

2、 transform: scale(0.5)

本次项目中我就是使用这种方法去解决的, 而且个人认为这种方式比较成熟

实现方式

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

优点

圆角无法实现,hack代码多,实现4条边框比较闹心

缺点

只能单独使用,如果嵌套,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 可以实现单条,多条边框。边框的颜色随意设置

缺点

如果有圆角的效果,很sorry 圆角的地方没有线框的颜色。都要写的代码也不少

参考链接

5、 用图片

实现方式

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

优点

缺点

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

转载自

作者: Hugo Web前端开发

原文地址: http://www.tuicool.com/articles/ZRv6bun

探讨iOS某个像素点是否显示依据,以摸索为什么iOS没适配的应用在iphone6上面线的粗细会不稳定。有的线会变粗。

//    如果单个像素分为10格,如上图,从上往下第5格被填充或从右往左第5格被填充,则该像素就会被显示,实际上系统会划分的更细,不只是10格。 //    下面是横向的测试代码,需要在2倍屏上测...
  • ddd998
  • ddd998
  • 2015年07月07日 14:23
  • 2312

再谈mobile web retina 下 1px 边框解决方案

本文实际上想说的是ios8下 1px解决方案。 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px。由其影响美感。...

CSS3实现手机1px边框,细如发丝

前言 我们使用手机App的WebView和浏览器查看网页时,经常能看见那细如发丝的“0.5px”的边框、线条,让整个页面效果看起来更加细致。这里所谓的“0.5px”是如何实现的呢,web页面中最小的单...

CSS/移动端添加真正1PX边框线

.border-1px{ position: relative; &:after{ display: block; position: absolute...

解决CSS移动端1px边框问题

web移动端解决1px边框问题

7种方法解决移动端Retina屏幕1px边框问题

在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了。原谅我的近视眼,为什么我看不出什么差距了,结果UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样!!! 没有办法,只有在后面的版本中去...

移动端视网膜(Retina)屏幕下1px边框线的解决方法

本文主要介绍几种 移动端视网膜(Retina)屏幕下1px边框线的解决方法。 1、通过viewport + rem的方式来兼容。 目前这种兼容方案相对比较完美,适合新项目(老项目改用R...

移动端视网膜(Retina)屏幕下1px边框线 解决方案 -- 不错 保留

移动端视网膜(Retina)屏幕下1px边框线 解决方案

Retina屏的移动设备如何实现真正1px的线?

前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决? 原来一直没在意,源于自己根本不是像素眼…… 今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距...

在retina屏中实现1px border效果

街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先,来看下面视觉给的输出图中的border: 从上面的视觉图可以看到,border是一根非常细的线。这篇文章将说明如何使用bor...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Webapp中1px边框在retina屏中变粗的问题
举报原因:
原因补充:

(最多只允许输入30个字)