移动端的兼容性问题

①winPhone的兼容：

@media all and (-ms-high-contrast: active),(-ms-high-contrast: none){}

 

②android4.0+ ios4+

@media all and (-webkit-transform-3d){}

 

html{font-size:62.5%;/* 10÷16=62.5% 至关于10px */}
body{font-size: 1.2rem;}
@media only screen and (min-width:480px){html{font-size:94%;}}
@media only screen and (min-width:560px){html{font-size:109%;}}
@media only screen and (min-width:640px){html{font-size:125%;}}
@media only screen and (min-width:720px){html{font-size:150%;}}
@media only screen and (min-width:800px){html{font-size:175%;}}
@media only screen and (min-width:880px){html{font-size:200%;}}
@media (device-width:320px){html{font-size: 60%;}}
@media (device-width:320px) and (min-width: 480px){html{font-size: 74%;}}
@media (device-width:473px){html{font-size:58%;/* 兼容winPhone 竖向 */}}
@media (device-width:320px) and (-webkit-min-device-pixel-ratio:2){html{font-size:56%;}/*兼容iphone4s、5 竖向*/}
@media (device-width:320px) and (-webkit-min-device-pixel-ratio:2) and (min-width: 480px){html{font-size:74%;}/*兼容iphone4s、5 横向*/}
@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){html{font-size:65.5%;/* 兼容iphone6 竖向 */}}
@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2) and (min-width:667px){html{font-size:118%;/* 兼容iphone6 横向 */}}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:3){html{font-size:74%;/* 兼容iphone6 plus 竖向 */}}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:3) and (min-width:736px){html{font-size:128%;/* 兼容iphone6 plus 横向 */}}
@media (device-width:1080px) and (-webkit-min-device-pixel-ratio:3){html{font-size:66%;/* 兼容 三星Galaxy S4 横向 */}}