网站优化之分辨率

http://screensiz.es/tablet 查看手机,平板,电脑各个尺寸。

StatCounter原统计数据查看当今浏览器以及pc屏幕分辨率占比,可作为适配尺寸时的参考。

苹果的各种尺寸:http://tool.lanrentuku.com/guifan/ui.html 

安卓的各种尺寸:http://www.25xt.com/android

 

IOS手机适配:

@media only screen and (-webkit-min-device-pixel-ratio:2){

/*针对iphone4的css样式*/

}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
/*5 5s 屏幕尺寸320*568  */
}

@media only screen and (min-device-width : 320pxand (max-device-width : 568px){

/*5 5s 屏幕尺寸320*568  或者上面的也可以*/

}

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
/*6  屏幕尺寸375*667  */
}

@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
/*6+  屏幕尺寸414*736  */
}

原文地址:https://www.cnblogs.com/wang715100018066/p/6003402.html