1、1px邊框變粗問題
造成邊框變粗的原因:
1现拒、在html中用了這樣的meta標簽
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
2、以font-size+rem實現(xiàn)響應式布局(iPhone6設(shè)計稿為例750pt*1334pt望侈，1px=2pt)
document.documentElement.fontSize=document.documentElement.clientWidth/7.5 + 'px'印蔬；
大部分設(shè)計稿是以iPhone6為基礎(chǔ)的，也就是說UI給的圖是繪制在750pt1334pt這樣大小的圖層上的脱衙，iPhone6下根元素的font-size=375/7.5px=50px的扛点，所以UI圖上的一個200pt200pt的div我們在寫樣式時是這樣的：
div{
width:2rem;
height:2rem;
}
經(jīng)過解析會變?yōu)?00px*100px，再經(jīng)過dpr=2的擴展又變?yōu)榱?00pt×200pt岂丘，這是正常的陵究，因為iPhone6的屏幕只有375px（750pt）寬，要讓750pt的寬度完全顯示只能這樣縮放奥帘。但這樣就導致了1px邊框的問題：
在750pt寬的UI稿上有一個高為1pt的線铜邮，通常做法會將其樣式寫為height：0.01rem；但這樣解析出來是0.5px寨蹋，iOS8以下及android是不支持小數(shù)像素的松蒜，不能通過dpr=2擴展成1pt，所以這些設(shè)備上會看不到這條線已旧。
如果直接寫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周圍四條線檀咙，如原創(chuàng)雅倒，作者之類的標簽
對于1，只需將線的寬度設(shè)為原來的2倍即可弧可；對于2蔑匣、只需把字體大小設(shè)為原來的2倍即可
2、12px字體問題
瀏覽器支持最小的字體是12px棕诵，ios除外裁良，但UI稿上常出現(xiàn)9px的字體。咋整呢校套，還是用transform:scaleY(.x)來處理价脾，可以寫成一個scss函數(shù)
3、image-set 實現(xiàn)高清化
.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+ 下已經(jīng)支持了灭忠。如果僅僅是做ip6+的高清適配方案膳算，image-set是一種實現(xiàn)方案。
3弛作、localStorage的大小限制
2013年起從5M升到10M.
參考文章：
1、移動 web 1px 邊框解決方案
2、移動端適配方案(上)
3长酗、localStorage
