前端开发中，响应式设计是必备技能。而在响应式设计中，viewport 适配就是一个至关重要的方面，因为它可以帮助我们处理移动设备和桌面设备之间的差异。
本文将介绍 viewport 适配的常见方案，并提示常见的坑点及解决方法。同时，我们将提供代码示例来帮助你更好地理解。
方案一：使用 meta 标签
在响应式设计中，我们可以使用 meta 标签来设置 viewport 。这是最基础、也最常用的一种方式。下面是代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
此代码中，我们设置了 viewport 的宽度等于设备宽度，以确保页面能够在设备上呈现。同时，我们还设置了 initial-scale 为 1，这意味着我们将使用设备默认缩放级别来显示页面。这样，无论页面在何种尺寸的设备上都会得到合适的渲染。
方案二：使用媒体查询
如果您想要更精细地控制响应式设计，媒体查询是一个很不错的选择。它可以让我们在不同的屏幕尺寸下应用不同的 CSS 样式。
下面是一个媒体查询的示例代码：
@media only screen and (max-width: 600px) {
body {
font-size: 14px;
margin: 10px;
}
}此代码中，我们使用 @media 和 only screen and (max-width: 600px) 来创建了一个针对小于 600 像素宽度的设备的 CSS 样式规则。我们将 body 标签的字体大小设置为 14 像素、设定 10 像素的 margin，以确保在小设备上更清晰地显示。
常见坑点及解决方案
在进行 viewport 适配时，常常会遇到以下常见问题：
1. iOS Safari 在全屏模式下的适配问题
在 iOS 上，Safari 有一个全屏的模式，此时页面的 viewport 宽度可能会被错误地计算为页面宽度。为了避免这个问题，我们可以在头部添加：
<meta name="apple-mobile-web-app-capable" content="yes">
这会告诉 Safari，这个网站是应用程序，在全屏模式下打开时不要出现地址栏。
2. 响应式图片适配问题
在响应式设计中，我们经常需要为不同大小的设备提供不同分辨率的图片。这种情况下，我们可以使用 srcset 属性。下面是一个这样的示例代码：
<img srcset="small.jpg 480w,
medium.jpg 800w,
large.jpg 1200w"
sizes="(max-width: 480px) 80vw,
(max-width: 800px) 70vw,
600px"
src="large.jpg" alt="响应式图片">此代码中，我们为图片提供三种不同分辨率。同时，我们还设置了 sizes 属性，根据设备宽度选择图片。
然而，在使用 srcset 时，您可能会发现它在某些设备上不起作用。如果您遇到这种问题，可以考虑使用一个 JavaScriot 库，例如 picturefill。
3. 响应式单位问题
在响应式设计中，我们需要使用相应的单位来确保页面在不同大小的设备上呈现良好。一些常见的响应式单位包括：
- em：相对于元素字体的大小
- rem：相对于根元素（即
<html>元素）字体的大小 - vw：界面宽度的百分比
- vh：界面高度的百分比
但是，这些单位并不总是完美的。如果您遇到了困难，可以考虑使用更好的单位，例如 ch、ex、px 和 %。同时，也可以使用 Less、Sass 甚至是 PostCSS 来编写更强大的响应式 CSS。
总结
以上，我们介绍了 viewport 适配的两种基本方案，以及如何避免三个常见问题。希望这篇文章能够帮助您更好地掌握响应式设计。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65858fced2f5e1655d02bfe6