前端如何适配手机屏幕之viewport

前端如何适配手机屏幕之viewport

有同学在后台留言询问什么是响应式网页设计。 我的第一反应是，这个话题以前讨论过吗？ 果然，我查了一下，发现了这篇文章。

响应式设计实际上是前端用来适应浏览器屏幕和分辨率的一种方法。 上一篇文章讲了响应式设计的概念。 归结起来就是一句话：网页内容能够根据屏幕大小自动适应，不会拉伸、错位。 如何保证呢？ 上一篇文章虽然列出了一些常见做法，但似乎是居高临下。 没有具体的技术，总感觉少了点什么。 其实响应式设计是一个很大的话题，就像iOS屏幕适配一样，涵盖了很多方面。 今天我们先来看看最简单最基本的概念。

很早的时候，开发者在设计网页时往往只考虑PC上的浏览器。 例如，我们的桌面屏幕显示器的分辨率是1024*768，他们真正按照这个尺寸将元素放置在网页中。 例如，页面上有一张图片，在CSS中定义为300px*300px。 在桌面显示器上，对应的是300像素*300像素，所以不会有太大问题。

后来，随着智能手机的出现，屏幕突然变得小了很多。 如何在手机浏览器上正确显示这些PC网页？ 首先，有一点是确定的：网页仍然必须按照原来的大小和位置进行打字，否则原有页面的结构就会被破坏。 为此，Apple 引入了 . 俗称视口，用于描述浏览器可以排版和渲染网页的区域。 前面提到，默认情况下，这个区域的大小必须非常接近 PC 的大小，才能不破坏页面结构，因此 Apple 选择了 980px 宽的值。 后来这个值也被采用了，逐渐大家都采用了这个值。

你可以理解，默认情况下，浏览器会有一个，可能比手机屏幕大很多，浏览器会把网页布局在上面。

但很明显，手机屏幕毕竟只有这么大。 如果要显示完整的PC网页，浏览器有两种选择：

1.布局完成后，缩放至手机屏幕大小，这样会造成模糊。

2.在网页中添加滚动条，让用户自行滚动。

要完美解决这个问题，唯一的办法就是重建现有页面。 那么问题来了，到底要适配多大的屏幕呢？ 例如，有一个按钮。 设计师希望它占据屏幕的1/4。 如果原始宽度为 320px，则应为 80px 宽。 但当它放到屏幕上时，手机的尺寸并没有改变，只是分辨率发生了变化。 它的宽度是 640px，那么这个按钮应该宽度为 160px 吗？ 你不可能为每台机器都编写它。

办法总有的，我们可以通过改变CSS中的1px与物理设备的1px的转换关系来解决。 这么说吧，设计师想要的效果无非是占据屏幕1/4的按钮在打开和关闭时看起来大小相同。 尺寸相同是指肉眼看起来相同，而不是像素数相同。 因为是屏幕，所以像素密度很高。 1英寸的屏幕可以容纳两倍的像素。 如果能够做到上面定义的1px等于物理1px，而这里定义的1px等于物理2px，那么两台机器上80px按钮的长度其实是一样的。

我们之前说过，dp 与米、厘米是相同的物理长度，CSS 中的 px 单位也是如此。 这个1px等于真正的1px还是2px，取决于手机的屏幕密度。 密度越大，CSS中1px能代表的真实像素就越多。

有了这个换算关系，如果密度小，我们就计算得少，如果密度高，我们就计算得多。 这样，我们可以假设在CSS的世界里，宽度最多只有320px。 当然，这只是一个假设。 有些手机是360px、380px、400px。 这是由一个名为 的值决定的。 iOS 和 是不同的，也不同于 . 如何实现兼容？

这里还需要另一个。 我们现在将宽度写为-width。 前面提到过，浏览器默认的尺寸很大，有980px那么大。 如果写-width，则会根据不同手机取值。 这个值会小很多，大约320px。 具体尺寸不确定。 ，但一定是最完美的。

概括起来就是一个区域。 为了适应桌面上的网页，手机上的浏览器将其设置为980px。 但是，这样的网页即使能够正确显示，也必须进行缩放或者滚动，所以我们在编写前端网页时，会使用一个width=-width，这样我们在CSS中看到的屏幕总宽度约为320px，1px代表的物理像素数会根据屏幕密度自动换算。 这样，我们就实现了设计师的目标：“标记为80px的按钮在不同手机上看起来大小相同”。

你可能会问，上面的-scale=1到底是什么？ 我下次再谈这个。 当然，前端适配屏幕的方式有很多种，下次再讲。