移动端视网膜（Retina）屏幕下1px边框线 解决方案
原因：
因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px。
但在IOS8中，已经支持0.5px了，那就意味着, 在devicePixelRatio=2的时候，我们可以使用如下的css：
div{
border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
div{
border:0.5px solid #000;
}
}
但在ios7以下，android等其他系统里，0.5px会被显示为0px，所以需要写hack来兼容旧版本的系统。
有两种方案：
1、JS判断浏览器版本，是否是IOS8+，是的话则加上hairlines的类名，加在head里即可。
CSS代码：
div{
border:1px solid #000
}
.hairlines div{
border-width:0.5px
}
JS代码：
if (window.devicePixelRatio && devicePixelRatio >= 2) {
document.querySelector('body').classList.add('hairlines')
}
2、JS判断是否支持0.5px的边框，是的话，则加上hairlines的类名。（代码放在body内）
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement('div');
testElem.style.border = '.5px solid #000';
document.body.appendChild(testElem);
//当div存在
if (testElem.offsetHeight == 1){
document.querySelector('html').classList.add('hairlines');
}
//添加完hairlines类名后，则删除div
document.body.removeChild(testElem);
}
将代码放在body内会有一些重绘，第一种方法会更好一些。
当然这些方法，只能兼容IOS7包括IOS7以上的机器，但如果想兼容其他机器怎么办呢？这块我就要细细道来...
在retina屏下面，如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 你将永远无法写出1px宽度的东西。
关于CSS像素和物理像素的定义，这个文章里有详细的介绍 走向视网膜（Retina）的Web时代。
在 viewport 中, 因为设置了initial-scale(表示初始时的缩放比例),minimum-scale(最小缩放比例)和maximum-scale(最大缩放比例)都为1, 因此整个页面都不能缩放, retina 屏幕下1个 css 像素对应 2个(多个)物理像素, 因此我们永远写不出1px(物理)宽度的东西. 然而我们其实可以这样写:
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
淘宝M端 就是这样的方案，这样一个css的像素就能完美对应1个物理像素，我们就可以写出1px的东西了。
其他方案：
1. transform: scale(0.5)
方法1：
CSS代码：
div{
height:1px;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
background: #000;
}
HTML代码：
<body>
1px边框线
<div></div>
</body>
缺点
圆角无法实现，实现4条边框比较麻烦，并且只能单独实现，如果嵌套，会对包含的效果产生不想要的效果，所以此方案配合:after和before独立使用较多。
比如画一个商品的边框四条线，容器的after和before可以画2条线，利用容器的父元素的after、before再画2条线。
div{
position: relative;
}
div:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #000;
-webkit-transform:scaleY(.5);
-webkit-transform-origin:0 0;
}
2. box-shadow
实现方法：
利用CSS对阴影处理的方式实现0.5px的效果。
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
优点：
基本所有场景都能满足，包含圆角的button，单条，多条线。
缺点：
- 颜色不好处理， 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现，不好用。
- 大量使用box-shadow可能会导致性能瓶颈。
- 四条边框实现效果不理想。
3. 使用background-image
使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。
渐变 linear-gradient (50%有颜色，50%透明)
单条线：
div {
height: 1px;
background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%);
background-position: top left;
background-repeat: no-repeat
background-size: 100% 1px;
}
多条线：
div {
background-image:-webkit-linear-gradient(top, transparent 50%, #000 50%),-webkit-linear-gradient(bottom, transparent 50%, #000 50%),-webkit-linear-gradient(left, transparent 50%, #000 50%),-webkit-linear-gradient(right, transparent 50%, #000 50%);
background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
background-repeat: no-repeat;
background-position: top left, bottom left, left top, right top;
}
优点:
- 可以设置单条,多条边框
- 可以设置颜色
缺点:
- 大量使用渐变可能导致性能瓶颈
- 代码量大
- 多背景图片有兼容性问题
用图片(base64)：
div {
border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5JREFUeNpiPnH8zH/G////MzAxAAHTyRNn/wMEGABpvQm9g9TJ1QAAAABJRU5ErkJggg==") 2 0 stretch;
border-width: 0px 0px 1px;
}
优点:
- 可以设置单条,多条边框
- 没有性能瓶颈的问题
缺点:
- 修改颜色麻烦, 需要替换图片
- 需要用到两张图片
- 多背景图片有兼容性问题
移动端视网膜（Retina）屏幕下1px边框线 解决方案的更多相关文章
- Retina屏实现1px边框
问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...
- Retina屏下1px border
layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上 ...
- Retina屏幕下image-set
实现Retina屏幕下图像的显示方法,还特别给我截取了一段代码: .soso .logo .qqlogo { display: block; width: 134px; height: 44px; b ...
- 【转】Retina 屏幕下，网页图片的显示兼容
感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率.由于分辨率的提升,网页中的文字.Flash 和 SVG 内容显示得比原来更加精细,但网页中的图片却变得 ...
- 移动端Retina屏boder 1px显示为2px或3px的解决方法
我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比deviceP ...
- 在移动端画出真正的1px边框
一.问题 写H5的样式时候,设置元素的边框为1px,不幸的事情在IOS设备上发生了,设计师会说,咦,边框怎么那么大,这是2px了吧?改成1px.我明明设置成1px了啊. 二.为什么边框变粗了? ...
- retina屏实现border边框1px
.border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff33 ...
- css移动端适配 1px边框的解决方案
.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是 ...
- 移动端，多屏幕尺寸高清屏retina屏适配的解决方案
移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页 ...
随机推荐
- C#通过属性名称获取(读取)属性值的方法
之前在开发一个程序,希望能够通过属性名称读取出属性值,但是由于那时候不熟悉反射,所以并没有找到合适的方法,做了不少的重复性工作啊! 然后今天我再上网找了找,被我找到了,跟大家分享一下. 其实原理并不复 ...
- PIC12F508/505/509/510/506/519/526/527单片机破解芯片解密方法！
IC芯片解密PIC12F508/505/509/510/506/519/526/527单片机破解 单片机芯片解密型号: PIC12F508解密 | PIC12F505解密 | PIC12F506解密 ...
- [LeetCode] Total Hamming Distance 全部汉明距离
The Hamming distance between two integers is the number of positions at which the corresponding bits ...
- 【配置】检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法（非简单设置为【经典】模式）。
× 检测到在集成的托管管道模式下不适用的ASP.NET设置的解决方法(非简单设置为[经典]模式). 我们将ASP.NET程序从IIS6移植到IIS7,可能运行提示以下错误: HTTP 错误 5 ...
- ThinkPHP 多语言
1.注意区分项目语言包和系统语言包 2.实现语言包和数据库语言同步切换 实用链接: ThinkPHP完全开发手册3.1 多语言 thinkphp3.1 多语言简单demo 总结ThinkPHP使用技巧 ...
- 让PDF.NET支持不同版本的SQL Server Compact数据库
最近项目中需要用到嵌入式数据库,我们选用的数据开发框架是PDF.NET(http://www.pwmis.com/SqlMap/),之前的博文已经总结了让PDF.NET支持最新的SQLite,今天我们 ...
- html5定位getLocation()
HTML5 Geolocation API 用于获得用户的地理位置. 如果用户不允许定位,那么用户信息是不可用的. 获取用户的位置:getCurrentPosition() 返回数据如下 返回用户当前 ...
- 个人理解c#对称加密 非对称加密 散列算法的应用场景
c#类库默认实现了一系列加密算法在System.Security.Cryptography; 命名空间下 对称加密 通过同一密匙进行加密和解密.往往应用在内部数据传输情况下.比如公司a程序 和B程序 ...
- http与https的区别
HTTPhttp是一个应用层协议,由请求和响应构成,是一个标准的客户端服务器模型.http通常承载于TCP之上,有时也承载于TLS或SSL协议层之上,这就是常说的httphttp 无状态协议,同一个客 ...
- JavaScript数据存取的性能问题
JavaScript中四种基本的数据存取位置: 字面量:只代表自身 字符串.数字.布尔值.对象.函数.数组.正则,以及null和undefined 快 本地变量:var定义的 快 数组元素 ...