高清屏上,border: 1px 的处理
其实并不是所有做移动端适配的人, 都一定会遇到这个问题。
比如你的设计师给了一张 iphone6 为基准的 750*1334 的设计稿, 里面有一个 border 标注的是 1px。
所以设计师实际上想要的是 retina 屏下的 1px, 也就是普通屏幕下的 0.5px。
但问题是: 并不是手机端屏幕都支持 0.5px,ios7 之下或者安卓机都可能把 0.5 解析成 0px
这里给到一种解决方案: 设置 initial-scale=0.5
<meta name=”viewport” content=”width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no”>
这样，页面中的所有的 border: 1px 都将缩小 0.5，从而达到 border: 0.5px; 的效果。
然而，页面 scale，必然会带来一些问题：
字体大小会被缩放
页面布局会被缩放(如: div 的宽高等)