输入关键字或相关内容进行搜索
在做app项目的时候，总是发现做出来的效果总比效果图要差一些，总感觉哪里不大对劲。
那天在群里看别人聊天，找到问题的所在了，直接在设置边框为1px的时候，因为手机像素比的关系，有的是2，有的3，所以显示的有时候是2px有时候是3px，线不细，不好看，大家可以对比一下下面这三个图片，第一张是app项目的，第二张是web的，第三张是为了方便查看调了html字体大小的app项目，下面会说明为何要调html字体大小。
第三张与第二张一对比就发现了，只是边框细了，但是美感就出来了
web的效果链接：/3
是同一套代码，但是一个细，一个粗，因为用rem为单位，而且app的打包之后，字会变的非常大，不过调节html.Ratio-10这系列的值都为10px之后字就不大了，但是边框还是组
实现这种效果的原理就是用js来判断像素比，并根据像素比来设置meta里面的viewport的值
但是一套代码，web和app不同的效果，但是按理说不应该这样的，请问下官方这如何解决
下面贴出代码css:html , body , ul , li ,ul li
{font-family: &微软雅黑&;padding:0;margin:0;list-style-type:}
html{background:#f0f0f0;}
html.Ratio-10 {font-size:10}
html.Ratio-15 {font-size:10}
html.Ratio-20 {font-size:20}
html.Ratio-25 {font-size:25}
html.Ratio-30 {font-size:10}
html.Ratio-40 {font-size:40}
.card {width:80%;margin:0border-radius:1.5height:overflow:position:}
.card_ul {background:#F8F8F8;width:95%;margin:0 auto 1.0border:1px solid #C8C7CC;border-radius:0.8}
.card_ul li {height:5.0font-size:1.5width:100%;line-height:5.0padding:0 3%;color:#242424}
.card_bottom {border-bottom:1px solid #C8C7CC;}
\nhtml:&!DOCTYPE html&
&meta charset=&utf-8&&
&meta name=&viewport& content=&width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no& /&
&title&&/title&
var dpr = window.devicePixelRatio || 1, scale = 1 /
var metaEl = document.querySelector('meta[name=&viewport&]');
metaEl.setAttribute('content', 'width=device-width,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+ scale+',user-scalable=no');
document.documentElement.className
= ' '+ (dpr * 10);
&script src=&js/mui.min.js&&&/script&
&link href=&css/mui.css& rel=&stylesheet&/&
&link href=&css/style2.css?v=3.99889& rel=&stylesheet&/&
&script type=&text/javascript& charset=&utf-8&&
mui.init();
&div class=&mui-content&&
&div class='card_box'&
&ul class='card_ul'&
&li class='card_bottom'&这是内容用rem为单位&/li&
&li&在不同的手机下&/li&
&ul class='card_ul'&
&li class='card_bottom'&显示的大小应该都一样&/li&
&li&不会大小不一&/li&
&ul class='card_ul'&
&li class='card_bottom'&但是边框都很细&/li&
&li&可以截图放大看，与原生app的线一样&/li&
如果你使用rem方案，建议参考：
/amfe/lib.flexible
我一般是用border-image来实现1px的边框，只要设置border-width为1px，不管在哪个平台都是正儿八经的1像素，如下图截图
要回复问题请先或
关注: 3 人1、边框粗细原因
在移动端下设置border为1px，在某些设备上看比1px粗。
这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。
devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
2、解决办法
a、使用border-image实现
&根据需求选择图片，然后根据css的border-image属性设置。代码如下
-moz-border-image:url(/i/border.png) 30 30&/* Old Firefox */-webkit-border-image:url(border.png) 30 30
优点：可以设置单条、多条表框。缺点：更换颜色和样式麻烦，某些设备上会模糊。
b、使用background-image实现
background-image 跟border-image的方法一样，你要先准备一张符合你要求的图片。优缺点与border-image一样。
.background-image-1px {
background: url(../img/line.png) repeat-
-webkit-background-size: 100% 1 background-size: 100% 1
c、使用box-shadow模拟边框
.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7
优点：代码少，兼容性好。缺点：边框有阴影，颜色变浅。
d、伪类 + transform 实现
.border-1px{
margin-bottom: 20
& 　.border-1px:after{
　　　display :block&;&&　　&position :&　　&bottom :0;&&　　left :0&;& 　　&width:100%;&&　　 border-top:1px solid $&&　　content :' ';
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio:1.5)&.border-1px&&&::after&&&-webkit-transform:scaleY(0.7)&&&transform:scaleY(0.7); &@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2)&.border-1px&&&::after&&&-webkit-transform:scaleY(0.5)&&&transform:scaleY(0.5);&
优点：可以满足所有场景，且修改灵活。缺点：对于已使用伪类的元素要多层嵌套。
阅读(...) 评论()移动端border为1px的设置方法
一般做了前端一段时间的人都知道，在手机端使用border为1px时在retina屏中会显示2px像素，那是因为我们定义的是css的1px，而物理像素上显示则因为是一个像素代表2个像素，所以出现border
为2px，解决方法有很多，我举一个最容易使用的伪元素方法吧。
使用伪元素的方式
.Bbottom:after{
& & position:
& & content: "";
& & height:1
background:#d5d5d5;
& & width:100%;
& & bottom:0;
-webkit-transform:scaleY(.5);
-ms-transform:scaleY(.5);
-o-transform:scaleY(.5);
transform:scaleY(.5);
//-webkit-transform:scaleY(.5);是为了使高度为1px缩小为0.5；
//注意伪元素使用时，记得定义父级为position:
.Btop:before{
& & position:
& & content: "";
& & height:1
background:#d5d5d5;
& & width:100%;
& & top:0;
-webkit-transform:scaleY(.5);
-ms-transform:scaleY(.5);
-o-transform:scaleY(.5);
transform:scaleY(.5);
当然还会有其他的一些因素会来干扰使用方法：
1.手机有各种类型的倍数，ios容易辨别2倍和3倍，但android的不同版本就多了--------解决方法是用media来分别判断并设置（如：@media
(-webkit-device-pixel-ratio: 3){}）
2.当然原来用一个border:1px solid
#000;就能解决的，非得用更多的代码去解决，必然在性能上会有一个影响；权衡得失自行考虑（考虑和设计师谈谈心）
3.更要注意的一点是请考虑兼容性问题，这个也是必须要考虑到的，主流浏览器一般没问题，但是用到了一些webview也好，其他的也好，浏览器的渲染上就是一个问题了，需要值得注意。
欢迎加群QQ：
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}