RWD Viewport

响应式网页设计：视口

理解和控制视口是创建能够适应不同屏幕尺寸的响应式网站的第一步。

什么是视口？

视口是用户在浏览器窗口中可见的网页区域。它的大小因设备而异，从大型桌面显示器到小型智能手机屏幕差异很大。

过去，网站通常设计成适用于桌面屏幕的固定宽度。当移动浏览变得流行时，移动浏览器最初尝试通过缩小（‘shrinking’）整个页面以适应较小的屏幕来显示这些固定宽度的网站。这导致了文本极小、难以阅读，并需要用户不断放大和缩小视图。

这种“快速修复”并非良好的用户体验。

设置视口 Meta 标签

HTML5 引入了视口 <meta> 标签，允许开发者控制视口的大小和缩放，为响应式设计提供了基础。

您应该在所有 HTML 文档的 <head> 部分包含以下 <meta> 标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

让我们来分解一下 content 属性：

• width=device-width：这设置了布局视口的宽度，使其与设备的屏幕宽度（以 CSS 像素为单位）匹配。这确保了页面内容能够自然地重排以适应屏幕。
• initial-scale=1.0：这设置了页面首次加载时的初始缩放级别。值为 1.0 会阻止浏览器最初放大或缩小，使页面以其预期大小显示。

如果没有这个标签，移动浏览器通常会在更宽的虚拟视口（例如 980px）上渲染页面，然后将其缩小，导致前面描述的问题。有了这个标签，浏览器将使用实际的设备宽度作为布局视口。

添加这简单的一行对于任何现代响应式网站都至关重要。

延伸阅读：在 MDN Web Docs 上了解更多关于视口 meta 标签的信息。