hairline!ios实现边框0.5px
来源:互联网 发布:泳道流程图制作软件 编辑:程序博客网 时间:2024/06/03 19:28
在2014WWDC上,Ted O’Connor提出了“retina hairlines”的解决方案,即在ratina屏幕上可以显示0.5px宽度的边框。他的方案是这样的:
1 Standard border syntax: 2 div{ 3 border:1px solid black; 4 } 5 Retina hairline border syntax: 6 @media(-webkit-min-device-pixel-ratio:2){ 7 div{ 8 border-width:0.5px; 9 }10 }
看上去很简单吧?只需要一个媒体查询就OK了,但是笔者在实际使用后发现很蛋疼。因为许多具有ratina屏幕的设备比如ios7及更早版本,devicePixelRatio大于2的安卓设备,OS X Mavericks及更早版本,它们会默认为border-width等于0,即没有边框。
下面笔者给出自己的解决方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hairline {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 100px;
margin: 0 auto;
color: blue;
border: 3px solid #7c7c7c;
}
</style>
</head>
<body>
<div class="hairline">
hairline~
</div>
<script>
$(function(){
var agent = navigator.userAgent.toLowerCase() ;
var version;
if(agent.indexOf("like mac os x") > 0){
//ios
var regStr_saf = /os [\d._]*/gi ;
var verinfo = agent.match(regStr_saf) ;
version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
}
var version_str = version+"";
if(version_str != "undefined" && version_str.length >0){
version=version.substring(0,1);
if(version>=8){
$('.hairline').css('border-width','0.5px');
}
else{
}
}
});
</script>
</body>
</html>
以上DEMO可以Copy运行。
使用方法:在需要0.5px的地方添加.hairline就可以了。
优点:
- ios8及以上正确显示0.5px
- 安卓及其他不支持的浏览器显示原先定义的border-width
缺点:笔者手头没有高清屏的PC及Mac,所以以上方法不支持高清屏Mac及PC。
欢迎有兴趣的童鞋补充~
0 0
- hairline!ios实现边框0.5px
- 0.5px边框的实现
- 0.5px边框学习
- 如何实现1px边框
- 如何实现1px边框
- 关于像素边框0.5px
- RETINA 屏幕1px 边框实现
- 移动端1px边框实现
- 移动端1px边框实现
- 移动端1px边框的实现
- 移动端1px边框的实现
- 移动端实现1px的边框
- 移动端实现1px边框
- 0.5px边框,css及sass
- 在retain屏下实现真实1px边框
- Retina屏下的1px边框的实现
- 移动端Retina屏实现1px的边框
- CSS3实现手机1px边框,细如发丝
- Failed to create the Java Virtual Machine (Myeclipse或者eclipse启动报错)
- Java集合框架List,Map,Set等全面介绍
- Flink架构、原理与部署测试
- Linux课堂总结
- 三羊献瑞
- hairline!ios实现边框0.5px
- ios解决输入框弹出后position:fixed失效问题
- Selenium2启动浏览器且加载插件
- 深入探究JavaScript中的比较问题
- ngular2------bootstrap
- LR 与 SVM 的相同和不同
- 《无懈可击的Web设计》_灵活的文字
- Aspose.Words使用教程大全
- C语言深度解剖最后测试题【答案】