您和朋友一起出去，欢笑着，度过了一段美好的时光 - 当有人问大家一个彻底的脑筋急转弯：“为什么‘B’电池不存在？”

你被难住了。你的朋友们都被难住了。您拿出智能手机并将问题输入 Google 机器。 然后，突然出现了一家电池公司的博客文章，内容涉及全国统一的电池尺寸规格。这正是你要找的东西，你这个书呆子。

但事情是这样的：网站上的内容正在加载，就像您在桌面上查看该网站一样。换句话说，字体和图片非常小，您会发现必须放大并来回滚动才能阅读和交互t 与内容。这是一种令人烦恼的用户体验。

这是视口问题的示例。

网站的视口控制用户查看网页的设备的网页宽度。

如果您没有正确配置网站的视口，您的移动访问者将注定要经历数分钟令人沮丧的捏合和缩放操作。 （也就是说，如果他们选择留在您的网站上。）相信我，这可能是您网站的很多访问者。

如果您的网站基于 构建，则无需担心配置视口。您的网站将自动调整以适应任何设备的视口。但如果不是，即使您是，您也需要配置视口，以便为移动访问者提供良好的体验。

在这篇文章中，我将向您展示如何做到这一点。但首先，让我们更好地了解视口的工作原理及其外观。

如果您没有为移动设备设置视口，这些设备将以典型桌面屏幕的宽度呈现网页，然后进行缩放以适合屏幕，从而使文本和图形变得非常小。这称为“后备宽度”，范围为 800–1024 像素。

当您为移动设备设置视口时，网页的宽度将自动缩放以适合用户的移动设备，从而为他们提供更好的体验。

那看起来像什么？ 下面，左侧的屏幕没有配置视口，因此移动浏览器采用桌面宽度。右侧的屏幕配置了视口，因此移动浏览器知道匹配设备宽度并缩放页面，以便轻松阅读内容。

图片来源：

要检查，请转至 。将您的 URL 粘贴到空 fi 中字段并点击底部的“提交”。该工具将通过 Google 的移动设备友好测试来运行您的网站，如果您的视口未配置，它会告诉您。

如果您的视口尚未设置，请继续阅读。

要配置移动视口，您所要做的就是向您希望适合移动设备的所有网页添加元视口标记。

为此，只需复制下面的 HTML 代码段并将其粘贴到您网站的标头中即可。

元名称=视口内容=“宽度=设备宽度，初始比例=1”

在许多情况下，将此视口标记放在头文件中将使视口覆盖整个网站，使您的整个网站更加适合移动设备。但请注意，您可能必须分别向每个网页添加视口标签，尤其是当您的网站与 .如果您不使用集成解决方案，例如e 或 ，您必须手动检查以确保您的目标网页、网站页面和博客具有此视口标记，以便它们适合移动设备。

注意：添加此标签不会使您的网站响应移动设备（这是一个完全不同的过程），但它会使移动用户无需放大和缩小以及来回滚动阅读您网站上的内容并与之互动。

如果您保留红色文本（“设备宽度”），这仅意味着您不想设置显示内容的特定宽度 - 并且您的网页将采用该尺寸自动识别您的用户设备。你们中的大多数人都会想这样做。

如果您出于某种原因确实想要在特定设备上显示特定内容，那么您需要将该红色文本替换为所需设备的像素宽度。通过设置标签内的宽度（同样，这不是必需的）红色），那么任何设备都将以该特定宽度呈现。 （通常不建议这样做，除非您为特定屏幕尺寸设计了页面/网站。此外，您不能设置多个视口标签 - 您必须选择一种设备尺寸并坚持使用。）< /p>

但是假设您确实想要设置特定的宽度。例如，但是假设您希望您的网站在用户横向拿着 iPhone 6 时专门显示它。 iPhone 6 的横向宽度为 667 像素，因此您可以将此标签放在您的网站上：

元名称=视口内容=“宽度=667，初始比例=1”

所有 iPad 的横向宽度均为 1024 像素，因此您可以将此标记放在您的网站上：

元名称=视口内容=“宽度=1024，初始比例=1”

有道理吗？ 供您参考。

请记住，如果声明布局的宽度等于设备宽度，那么当用户旋转移动设备时，您会遇到问题。为了解决这个问题，您 *could* 使用 JavaScript 有条件地选择要使用的元标记属性，...但最简单的解决方案似乎是完全忽略宽度并简单地将其保持为“设备宽度”。

无论如何，HTML 标记的“初始比例”部分都可以保持为 1。 它只是确保当有人打开您的内容时，布局将以 1:1 的比例正确显示。这有助于您的网页充分利用横向宽度，无论移动设备的方向如何（纵向还是横向）。

就是这样！有疑问吗？在评论部分询问他们。

有关如何提高网站性能的更多提示，请查看我们最近改版的 .这个免费的在线工具可根据您网站的性能、移动准备情况、SEO、安全性等生成个性化报告。

来源：hubspot