[html5]前端一定要知道的关于手机界面的知识点viewport(4)

这个页面背景图是作为背景给了background-size:100%;的，所以整好铺满整个屏幕，大小看起来很适合。而上面的元素使用固定的px值来赋予大小的，例如左上角的人头给了width:100px;height100%;。为什么两者分别是这样子显示的?

网页重构时使用的单位px，就是通常所说的像素，是网页设计中使用最多的长度单位。将显示器分成非常细小的方格，每个方格就是一个像素(这和我们理解的屏幕分辨率的1920px*1080px的px是不同的)。不同设置下，方格的大小不一样。

例如iPhone4S如果不设置viewport，他就会默认是980px，就像把屏幕分成980份(不是屏幕分辨率的640px哦!)。如果设置一个元素为100px*100px，看起来就是屏幕的100/980，可能如下图所示：

例如iPhone4S如果设置viewport width=device-width，他就会是320px，就像把屏幕分成320份(不是屏幕分辨率的640px哦!)。如果设置一个元素为100px*100px，看起来就是屏幕的100/320，可能如下图所示：

未设置viewport，弹出来的都是设备的默认宽度，基本是980px，除了最后一台三星老爷机是800px。

设置了viewport，width=device-width，弹出来的是设置好的宽度，375px、360px、320px。为什么是这个大小?这就要用到上面讲的知识点了。

iPhone6的屏幕分辨率是1334*750px，ppi是326，所以系数是2x。那device-width就等于750/2=375px。

红米1s的屏幕分辨率是1280*720px，ppi是312，所以系数是2x。那device-width就等于720/2=360px。

页面里的红色块给的是200*200px，在几个设备看起来好像差不多大的样子。

(上图左边是三星note4，右图是红米1s)

三星note4的屏幕分辨率是2560*1440px，ppi是515，所以系数是4x。那device-width就等于1440/4=360px，和小米的divice-width一样大小。但是看起来左边的红色块明显大于右边，因为左边的设备大啊，虽然两者都是分成360份，但是明显左边的1份比右边的1份大。

以上解释了为什么给元素赋予固定的像素值，给字体16px的大小，在大部分手机里居然能看起来差不多大小，也明白了我们并不需要写其他尺寸来适配不同的屏幕大小。不知道我这样拐弯的解释大家能明白不?

对于应该按照多大的尺寸来设计移动网页，这个看设计师喜欢，640是以前的主流，因为好多设计师用的是iPhone4S、5S。现在在慢慢转向750，因为iPhone升级成6了。不管哪种尺寸的设计稿，重构都可以用一套方法制作好页面，如果是背景平铺(background-size:100%)、上面的元素px设置大小的话，没问题，能顺利适配其他手机的。如果是固定整体大小重构，再利用js判断屏幕大小进行页面缩放，也没问题，能顺利适配其他手机的。重要的前提是要设置好正确的viewport。

参考：

理解Android中dpi和分辨率的关系，谈谈Android做成适应全部手机的UI方式

http://blog.csdn.net/ueryueryuery/article/details/20048401

UI设计师不可不知的安卓屏幕知识

http://www.zcool.com.cn/article/ZNjI3NDQ=.html

Android屏幕适配全攻略(最权威的官方适配指导)

http://blog.csdn.net/jdsjlzx/article/details/45891551

移动前端开发之viewport的深入理解

http://www.cnblogs.com/2050/p/3877280.html

iPhone 6 Screens Demystified

http://www.paintcodeapp.com/news/iphone-6-screens-demystified

如何做跨DPI设计

http://www.ui.cn/detail/23624.html