mobile web retina 下 1px 边框解决方案
本文实际上想说的是ios8下 1px解决方案。 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成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,边框颜色修改起来不方便。
mobile web retina 下 1px 边框解决方案的更多相关文章
- 再谈mobile web retina 下 1px 边框解决方案
本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. ...
- 再谈Retina下1px的解决方案
https://www.w3cplus.com/css/fix-1px-for-retina.html
- 7种方法解决移动端Retina屏幕1px边框问题
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 7种方法实现移动端Retina屏幕1px边框效果
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- 移动 web 1px 边框解决方案
在移动端web页面开发中,为了使css中使用的尺寸与设计稿一致,通常会采用 rem 单位配合 lib-flexible 来实现移动端的适配,在IOS设备上 flexible.js 会根据设备的分辨率动 ...
- 移动端1px边框解决方案
在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...
- 移动端视网膜(Retina)屏幕下1px边框线 解决方案
原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...
- Retina屏下1px border
layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上 ...
- 移动端 Retina屏 各大主流网站1px的解决方案
Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="in ...
随机推荐
- springmvc访问路径传递参数
@RequestMapping(value = "/{path}/toList") public String toList(@PathVariable String path) ...
- 初学jquery遇见的两个小问题!
<body> <div id="divtest">div的内容</div> <div id="default&quo ...
- Cisco cmd命令(三)动态路由协议
路由选择协议:1.矢量距离协议 2.链路状态协议 RIP路由选择协议:1.使用矢量距离协议 2.RIPv1只能使用有类路由 3.RIPv2可以使用无类路由 路由更新定时器:用于将路由器本身完整的路由选 ...
- vs中动态DLL与静态LIB工程中加入版本信息的方法
说明:本文仅针对刚接触VS不久的新手们(包括ME),提供的一点小Tips,同时也是小生的首篇Blog文章,请大伙多多担待O(∩_∩)O哈! 步骤1 - 在工程中右键添加新建项 步骤2 - 选择创建RC ...
- OD调试3--reverseMe
OD调试3:reverseMe.exe(reverse就是逆向的意思) 运行效果图: 1关于寄存器 寄存器就好比是CPU身上的口袋,方便CPU随时从里边拿出需要的东西来使用.今天的程序中涉及到九个寄存 ...
- 常用网站--前端开发类+网页设计类+平面素材类+flash类
前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Do ...
- OpenCV——视频颜色识别
#include <opencv2/opencv.hpp> #include <iostream> using namespace std; using namespace c ...
- poj3581Sequence(后缀数组)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Sequence Time Limit: 5000MS Memory Limi ...
- C++程序设计实践指导1.1删除序列中相同的数改写要求实现
改写要求1:改写为以指针为数据结构 #include <iostream> #include <cstdlib> using namespace std; class ARP ...
- jQuery对checkbox的各种操作
//注意: 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr,1.6以上(包含)建议用prop //1.根据id获取checkbox $("# ...