专注于WEB前端开发,HTML基础知识,CSS基础知识,HTML5和CSS3,Javascript,Jquery,Jquery插件,移动开发,微信开发等技术话题

当前位置:CSSTOP主页 > 移动布局 > 正文

手机页面(Mobile Web Page)移动设备分辨率适配大

就以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 × 10241536 × 20481600 × 2560640 × 960720 × 1280640 × 1136480 × 800600 × 1024768 × 12801080 × 1920800 × 1280320 × 4801200 × 1920540 × 9601024 × 600480 × 854600 × 8001920 × 10801366 × 768720 × 7201280 × 8002048 × 1536

设备像素\宽度:17种

320480540600640720768800102410801200128013661536160019202048

设备像素\高度:15种

48060072076880085496010241080113612801536192020482560

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

768 × 1024800 × 1280320 × 480360 × 640320 × 568320 × 533600 × 1024384 × 640533 × 853400 × 6401024 × 600320 × 569600 × 800600 × 9601280 × 7201366 × 768360 × 360853 × 5331024 × 7681280 × 800768 × 1280

CSS像素\宽度:12种

320360384400533600768800853102412801366

CSS像素\高度:14种

36048053356856960064072076880085396010241280

像素密度: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 数据源的缺点是只看外国的主流手机的屏幕,国内的数据可能会不太一致。如果有人有国内的数据源,可以提供给我哟~

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