前端如何适配手机屏幕

在移动开发还未普及时，开发者设计网页，往往只考虑在PC上的浏览器中显示。若桌面屏幕显示器的分辨率是1024像素×768像素，开发者按照这个大小摆放网页内的元素即可。例如，现在页面内有一张图片，在CSS里定义的大小是300像素×300像素，在桌面显示器上刚好对应300像素×300像素，所以也不会出大问题。

智能手机产生后，显示器可利用的屏幕突然变小了很多，如何在手机浏览器上正确显示这些PC网页呢？如果还按照原来的大小和位置对网页进行排版会破坏原有页面的结构。

为了解决这个问题，苹果公司引入了viewport的概念。viewport俗称“视口”，用来描述一块区域，浏览器可以在这块区域上排版、渲染网页。这块区域的大小要和PC 屏幕的大小非常接近才能不破坏页面结构，所以苹果公司将宽度设定为980px。后来Android也采用了这个值，这个值慢慢被广泛采用。可以这样理解，浏览器在默认情况下会有一个viewport，它可能比手机屏幕大很多，要想展示完整的PC网页，浏览器有两个选择：

（1）排版完成之后，将网页缩放到手机屏幕的大小，这样会造成页面模糊。

（2）给网页加上一个滚动条。

要想完美解决这个问题，只能对现有的页面进行“回炉重造”。问题是，到底要按照多大的屏幕进行适配呢？比如，设计师想让一个按钮占屏幕的1/4大小，如果按照早期iPhone的宽320像素计算，它应该宽80像素，但是放到屏幕大小相同，分辨率是宽640像素的iPhone手机上，那这个按钮是不是应该有160像素那么宽？

我们可以通过改变CSS里的1像素和物理设备的1像素之间的换算关系解决这个问题，让设计师想要占屏幕1/4大小的按钮在屏幕大小相同，但分辨率不同的iPhone手机上看起来一样大。这个“一样大”，是指肉眼看上去一样大，而不是像素一样多，因为相同屏幕尺寸下，宽320像素和宽640像素的手机像素的密集程度不同。如果能做到在宽320像素的iPhone手机上定义的1像素等于物理上的1像素，而在宽640像素的iPhone手机上定义的1像素等于物理上的2像素，那么80像素的按钮，在两台手机上的长度实际上是一样的。而定义的1像素是等于真实的1像素还是2像素，要根据手机的屏幕密度计算。密度越大，CSS定义的1像素能表示的真实像素就越多。

这样就可以假定，在CSS的世界里，宽度最多只有320像素。当然，这只是假设，一些手机的屏幕宽度是360像素、380像素、400像素，这是由一个叫devicePixelRatio（设备像素比）的值决定的，但是 iOS 和 Android 不一样，Android系统不同的机型之间也不一样，怎么做到兼容呢？

这里就需要另一个viewport。现在把viewport的宽度写成device-width。前面讲过，浏览器默认的 viewport 有980像素那么宽，如果把 viewport 的宽度写成device-width，它就会根据不同的手机来取值，这个值会小很多（在320像素附近），具体大小是不确定的，但是它的显示效果一定是最完美的。

总结一下，viewport是一块区域，手机上的浏览器为了适配桌面上的网页，把它设置成宽980像素，但是这样的网页要正确地显示出来必须经过缩放或者用滚动条，所以开发者在写前端网页的时候，会用一个width=device-width的viewport，这样CSS里看到的屏幕总宽度在320像素左右，1像素代表的物理像素数会自动根据屏幕密度进行换算。这样就完成了设计师的目标：标注80像素的按钮，在不同的手机上，看起来一样大。