Mobile Web Page 到底要为多少种移动设备分辨率做适配？

Question

移动设备边界为：iOS、Android、Windows Phone 的手机和平板。

Answer 1

就以http://screensiz.es/为数据源，来计算一下吧。

为了不致于混淆，我们区分三个指标值：

• CSS pixel
• device pixel
• px density 即像素密度

具体来说，iPhone 4 和 iPhone 3 的 CSS pixel 是一样的，都是 320×480；但是二者的device pixel 则分别为 640×960 和 320×480；而二者的像素密度则分别为 200% 和 100%。
需要指出的是这里的 device pixel 和安卓里面的 device independent pixel 不是一个概念。

然后我们按照各个设备屏幕的宽×高、宽、高分别做累计。这里将无视设备由于重力感应转动屏幕方向而造成的影响。

结果

设备像素\宽度×高度：22种

768 × 1024 ， 1536 × 2048 ， 1600 × 2560 ， 640 × 960 ， 720 × 1280 ， 640 × 1136 ， 480 × 800 ， 600 × 1024 ， 768 × 1280 ， 1080 × 1920 ， 800 × 1280 ， 320 × 480 ， 1200 × 1920 ， 540 × 960 ， 1024 × 600 ， 480 × 854 ， 600 × 800 ， 1920 × 1080 ， 1366 × 768 ， 720 × 720 ， 1280 × 800 ， 2048 × 1536

设备像素\宽度：17种

320 ， 480 ， 540 ， 600 ， 640 ， 720 ， 768 ， 800 ， 1024 ， 1080 ， 1200 ， 1280 ， 1366 ， 1536 ， 1600 ， 1920 ， 2048

设备像素\高度：15种

480 ， 600 ， 720 ， 768 ， 800 ， 854 ， 960 ， 1024 ， 1080 ， 1136 ， 1280 ， 1536 ， 1920 ， 2048 ， 2560

CSS像素\宽度×高度：21种

768 × 1024 、 800 × 1280 、 320 × 480 、 360 × 640 、 320 × 568 、 320 × 533 、 600 × 1024 、 384 × 640 、 533 × 853 、 400 × 640 、 1024 × 600 、 320 × 569 、 600 × 800 、 600 × 960 、 1280 × 720 、 1366 × 768 、 360 × 360 、 853 × 533 、 1024 × 768 、 1280 × 800 、 768 × 1280

CSS像素\宽度：12种

320 、 360 、 384 、 400 、 533 、 600 、 768 、 800 、 853 、 1024 、 1280 、 1366

CSS像素\高度：14种

360 、 480 、 533 、 568 、 569 、 600 、 640 、 720 、 768 、 800 、 853 、 960 、 1024 、 1280

像素密度：4种

100% 、 150% 、 200% 、 300%

做法

获取数据的做法就是等待http://screensiz.es/页面加载完毕以后用DOM取得数据内容：

var deviceWHResult = {} ,
    deviceWResult = {} ,
    deviceHResult = {} ,
    cssWHResult = {} ,
    cssWResult = {} ,
    cssHResult = {} ,
    pxDensityPctgResult = {} ;
$(".table-wrapper").find('.device_types').not(".monitor").each(function(i,e){
    var $e = $(e) ;
    var deviceW = $e.find('.px_width_value').text().trim() ,
        deviceH = $e.find('.px_height_value').text().trim() ,
        pxDensityPctg = parseInt( $e.find('.px_density_value').text().trim() ) ,
        cssW = (deviceW * 100 / pxDensityPctg).toFixed() ,
        cssH = (deviceH * 100 / pxDensityPctg).toFixed() ;
    deviceWHResult[deviceW + " × " + deviceH] = true ;
    deviceWResult[deviceW] = true ;
    deviceHResult[deviceH] = true ;
    cssWHResult[cssW + " × " + cssH] = true ;
    cssWResult[cssW] = true ;
    cssHResult[cssH] = true ;
    pxDensityPctgResult[pxDensityPctg] = true ;
});

console.log( "deviceWHResult: " ) ;
console.dir(Object.keys(deviceWHResult)) ;
console.log( "deviceWResult: " ) ;
console.dir(Object.keys(deviceWResult)) ;
console.log( "deviceHResult: " ) ;
console.dir(Object.keys(deviceHResult)) ;
console.log( "cssWHResult: " ) ;
console.dir(Object.keys(cssWHResult)) ;
console.log( "cssWResult: " ) ;
console.dir(Object.keys(cssWResult)) ;
console.log( "cssHResult: " ) ;
console.dir(Object.keys(cssHResult)) ;
console.log( "pxDensityPctgResult: " ) ;
console.dir(Object.keys(pxDensityPctgResult)) ;

---

screensiz.es 数据源的缺点是只看外国的主流手机的屏幕，而这个和国内的还是不太一样。如果有人有国内的数据源，可以提供给我哟～

百度的流量研究院没有区分移动端，所以就没有使用它们的数据了。