H5 1px边框问题和小于12px字体问题及高清图解决方案

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倍即可

transform兼容性

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.

localStorage大小

参考文章：
1、移动 web 1px 边框解决方案
2、移动端适配方案(上)
3、localStorage