在移动设备上，由于屏幕尺寸有限，因此需要页面能够通过一定方式正确的展现，使得用户可以更好的使用网站。为了满足移动设备上的需求，前端开发者需要配置 viewport 来实现响应式设计。本文将介绍如何正确配置 viewport，以及一些实际应用的示例。
什么是 viewport？
viewport 是网页内容的可视区域，不同的设备，viewport 的大小也不同。通过设置 viewport，可以让网页在不同设备中以适当的比例展现，确保页面布局在不同设备中能够正常展示。
设置 viewport 的 meta 标签
在 HTML 文件的头部添加 meta 标签，可以设置 viewport 的大小、缩放比例以及是否允许用户缩放页面等内容。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
上面的代码中，width=device-width 表示 viewport 的宽度为设备的宽度。initial-scale=1.0 表示页面的初始缩放比例为 1。maximum-scale=1.0 表示用户最大缩放比例为 1，也就是不允许用户缩放页面。user-scalable=no 表示禁用用户缩放页面。
设备像素比
在移动设备中，由于屏幕较小，无法展现网站中原有的样式和布局。为了解决这个问题，移动设备通常会采用高像素密度的屏幕来提升图片和文字的清晰度。这就导致了一个问题：以高清晰度渲染页面的同时，保持真实物理像素的应该以何种形式在屏幕上展现。这个问题就造成了一个新的指标 ---- 设备像素比。
设备像素比（device pixel ratio）是设备的物理像素和虚拟像素的比值。虚拟像素其实就是 CSS 像素，移动设备会将 CSS 像素和设备像素进行匹配，保证页面展现的合理性。
比如 iPhone 6 的设备像素比为 2，如果用下面的代码写一个宽度为 1080 像素的页面，将使用 540 个物理像素进行展示，也就是会缩放一半：
body{width:1080px;}示例代码
下面是一个简单的响应式页面示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
----- --------------- ---------------------------- ------------------ ------------------ ------------------
------ ----------------
-- ---- --- ----- --
------ ----------- ------ -
---- -
----------------- --------
---------- -----
-
-
-- -- --- ----- --
------ ----------- ------ -
---- -
----------------- -----
---------- -----
-
-
--------
-------
------
---- ------------------
----------------
---------------------
------
-------
-------上面的代码中，当页面宽度大于等于 768 像素时，背景颜色变为 #f5f5f5，字体大小为 24 像素；当页面宽度小于 768 像素时，背景颜色变为 #eee，字体大小为 16 像素。
结论
通过正确配置 viewport，前端开发人员可以轻松地实现响应式设计。本文介绍了 viewport 的概念、如何设置 meta 标签以及设备像素比等相关内容，希望可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677602356d66e0f9aa08b2ec