在做app项目的时候，总是发现做出来的效果总比效果图要差一些，总感觉哪里不大对劲。
那天在群里看别人聊天，找到问题的所在了，直接在设置边框为1px的时候，因为手机像素比的关系，有的是2，有的3，所以显示的有时候是2px有时候是3px，线不细，不好看，大家可以对比一下下面这三个图片，第一张是app项目的，第二张是web的，第三张是为了方便查看调了html字体大小的app项目，下面会说明为何要调html字体大小。
第三张与第二张一对比就发现了，只是边框细了，但是美感就出来了
web的效果链接：http://www.myceshi.com/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: none;}
html{background:#f0f0f0;}
html.Ratio-10 {font-size:10px;}
html.Ratio-15 {font-size:10px;}
html.Ratio-20 {font-size:20px;}
html.Ratio-25 {font-size:25px;}
html.Ratio-30 {font-size:10px;}
html.Ratio-40 {font-size:40px;}
.card {width:80%;margin:0 auto;border-radius:1.5rem;height:auto;overflow:hidden;position:relative;}
.card_ul {background:#F8F8F8;width:95%;margin:0 auto 1.0rem auto;border:1px solid #C8C7CC;border-radius:0.8rem;}
.card_ul li {height:5.0rem;font-size:1.5rem;width:100%;line-height:5.0rem;padding:0 3%;color:#242424}
.card_bottom {border-bottom:1px solid #C8C7CC;}
html:
<!DOCTYPE html>
<html>
<head>
<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>
<script>
var dpr = window.devicePixelRatio || 1, scale = 1 / dpr;
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>
<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();
</script>
</head>
<body>
<div class="mui-content">
<div class='card_box'>
<ul class='card_ul'>
<li class='card_bottom'>这是内容用rem为单位</li>
<li>在不同的手机下</li>
</ul>
<ul class='card_ul'>
<li class='card_bottom'>显示的大小应该都一样</li>
<li>不会大小不一</li>
</ul>
<ul class='card_ul'>
<li class='card_bottom'>但是边框都很细</li>
<li>可以截图放大看，与原生app的线一样</li>
</ul>
</div>
</div>
</body>
</html>
一个网名 (作者)
回复的好快~我先这个链接~
2015-12-21 15:50
一个网名 (作者)
看了一下，不过这里面讲的是如何使用rem，rem我也会用，比如第三张图片就是在app下使用的rem，字体的大小不会像第一张图片那样有问题，但是边框不细了。
我的问题主要是边框1px的问题，我刚才也看了hello mui的案例，截图放大后发现里面的边框也并不是1px。
而且我用js判断dpr的值并设置mate里面的参数的时候，在web里面边框的大小就是1px，很细，很好看，但是在app里用同样的方法即无效了，这是为啥？
2015-12-21 16:03