记录生活
简单不先于复杂

开发自适应网站时需要知道的移动设备屏幕宽度

开发过自适应网站或者做过自适应WordPress主题的朋友都知道,网页自适应其实是通过CSS3的media query实现的。代码写好了,在各个手机上显示效果是什么样子的呢?是不是我们每种宽度的手机或平板电脑都要找来测试一遍呢?这当然是不可能的,就算有条件,这么多设备,估计测试的时间就要占网站开发时间的一半了。

其实只要掌握了移动设备的屏幕宽度信息,针对某一宽度范围内的设置写专门的CSS,然后找其中的一两款测试就可以了,因为是自适应,宽度用的是百分比,只要在测试的这两款设备上没问题,在屏幕宽度差不多的设备上应该也是没有问题的。下面是一些常见设备的屏幕宽度。

需要注意的是:屏幕宽度并不是屏幕的分辨率像素宽度,这是初学自适应的朋友最容易弄错的一点。

一些主流的手机尺寸:

设备型号 屏幕宽度 流行度
iPhone 4 (4, 4S) 320 8.8%
Galaxy SIII 360 8.8%
iPhone 5 (5c, 5s) 320 7.9%
Galaxy SII 320 6.4%
Google Nexus 4 by LG 384 6.1%
Galaxy Note II 360 3.7%
iPhone (Original – 3GS) 320 2.9%
Galaxy Note 400 2.9%
Nokia Lumia 920 384 2.7%
Nokia Lumia 720 320 2.4%
HTC One 360 1.9%
BlackBerry Q10 360 0.6%
BlackBerry Z10 384 0.5%

一些主流的平板电脑尺寸

设备型号 屏幕宽度 流行度
Apple iPad 1 & 2 768 25.0%
Apple IPad 3 & 4 768 24.9%
Google Nexus 10 by Samsung 800 10.5%
Samsung Galaxy Tab 10.1 533 4.2%
Samsung Galaxy Tab 2 10.1 800 4.0%
Asus Nexus 7 (2012) 603 3.6%
Apple iPad Mini 768 2.4%
Amazon Kindle Fire HD 8.9″ 800 2.0%
Amazon Kindle Fire HD 7″ 533 2.0%
BlackBerry PlayBook 1024 1.6%
Asus Nexus 7 (2013) 600 1.2%
Microsoft Surface Pro 1280 0.7%
Microsoft Surface 1366 0.6%
Galaxy Note 10.1 800 0.6%
Motorola Xoom 853 0.2%

写media query css时的代码建议

下面的代码出自网易的uec项目,使用的时候只需要把这段代码拷贝到CSS文件的末尾,然后针对不同宽度的设备写CSS即可。

/* 横屏 */
@media screen and (orientation:landscape){}
/* 竖屏 */
@media screen and (orientation:portrait){}
/* 窗口宽度<960,设计宽度=768 */
@media screen and (max-width:959px){}
/* 窗口宽度<768,设计宽度=640 */
@media screen and (max-width:767px){}
/* 窗口宽度<640,设计宽度=480 */
@media screen and (max-width:639px){}
/* 窗口宽度<480,设计宽度=320 */
@media screen and (max-width:479px){}
/* windows UI 贴靠 */
@media screen and (-ms-view-state:snapped){}
/* 打印 */
@media print{}
赞(0)
未经允许不得转载:爱安普 » 开发自适应网站时需要知道的移动设备屏幕宽度