1、1px边框变粗问题
造成边框变粗的原因:
1、在html中用了这样的meta标签
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
2、以font-size+rem实现响应式布局(iPhone6设计稿为例750pt*1334pt，1px=2pt)
document.documentElement.fontSize=document.documentElement.clientWidth/7.5 + 'px'；
大部分设计稿是以iPhone6为基础的，也就是说UI给的图是绘制在750pt1334pt这样大小的图层上的，iPhone6下根元素的font-size=375/7.5px=50px的，所以UI图上的一个200pt200pt的div我们在写样式时是这样的：
div{
width:2rem;
height:2rem;
}
经过解析会变为100px*100px，再经过dpr=2的扩展又变为了200pt×200pt，这是正常的，因为iPhone6的屏幕只有375px（750pt）宽，要让750pt的宽度完全显示只能这样缩放。但这样就导致了1px边框的问题：
在750pt宽的UI稿上有一个高为1pt的线，通常做法会将其样式写为height：0.01rem；但这样解析出来是0.5px，iOS8以下及android是不支持小数像素的，不能通过dpr=2扩展成1pt，所以这些设备上会看不到这条线。
如果直接写height:1px,会被扩展成2pt，这就是变粗的原因。(iphone6下1px=2pt)
解决方案：
使用transform:scale(.5)，该属性的兼容性也很好
.line {
position: absolute;
width: 100%;
height: 1px;
background: #eee;
left: 0;
top: 0;
}
&:not(:first-of-type) {
.line {
@media screen and(-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 3) {
transform:scaleY(.5);
transform-origin: left center;
}
}
}
// 常见的两张情形：1、画一条线；2、一个label周围四条线，如原创，作者之类的标签
对于1，只需将线的宽度设为原来的2倍即可；对于2、只需把字体大小设为原来的2倍即可
2、12px字体问题
浏览器支持最小的字体是12px，ios除外，但UI稿上常出现9px的字体。咋整呢，还是用transform:scaleY(.x)来处理，可以写成一个scss函数
3、image-set 实现高清化
.css {
background-image: url(1x.png); /*不支持image-set的情况下显示*/
background: -webkit-image-set(
url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */
url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */
);
}
目前移动端的支持程度来看，ios7+，android 4.4+ 下已经支持了。如果仅仅是做ip6+的高清适配方案，image-set是一种实现方案。
3、localStorage的大小限制
2013年起从5M升到10M.
参考文章：
1、移动 web 1px 边框解决方案
2、移动端适配方案(上)
3、localStorage
