视口meta标签真的必要吗？

Question

我已经创建了一些响应式站点，但对于响应式站点开发还是相当陌生的。在我的CSS中，我有99％的值以em或百分比表示。我正在使用媒体查询（最大宽度和最大设备宽度）进行布局更改。我还没有包含viewport meta标签，它在iOS，我测试过的许多Android手机和平板电脑以及所有桌面浏览器上都可以完美运行。添加元标记会破坏我的网站。我是在做错什么，还是在做正确的事情，以至于不需要包含它？我对为什么这似乎是一种最佳实践感到困惑，因为它破坏了我的工作。我想念什么吗？

Answer 1

在台式机操作系统上，浏览器视口是固定数目的像素宽，并且网页内容按原样呈现在其中。

从iOS上的Safari（或当时我们称为iOS的任何版本）开始，移动浏览器的视口一直是“虚拟的”。尽管视口仅可能（例如）占用界面中320个物理像素的空间，但浏览器会创建一个更大的“虚拟”视口（我认为iOS上默认为980像素），并在那里显示内容，然后缩小该虚拟视口，直到它适合设备屏幕上可用的实际物理像素为止。

视口meta标记可让您告诉移动浏览器该虚拟视口的大小。如果您实际上并未更改网站的移动设计，这通常很有用，并且通过更大或更小的虚拟视口可以更好地呈现该外观。（我相信选择980像素作为默认像素是因为它在2007年渲染很多备受关注的网站方面做得很好；对于任何给定的网站，不同的值可能会更好。）

就个人而言，我总是使用<meta name="viewport" content="width=device-width, initial-scale=1">虚拟视口来匹配设备尺寸。（请注意，initial-scale=1使虚拟视口适应iOS上的横向模式似乎是必需的。）这使移动浏览器的行为类似于台式机浏览器始终具有的行为，这就是我所习惯的。

没有视口元标记，您的网站将呈现到设备的默认虚拟视口中。我认为这不一定是问题，特别是如果您所用的单位都是em或百分比。但是，如果您需要在任何时候考虑像素，可能会有些混乱，尤其是因为不同的浏览器可能具有不同大小的默认虚拟视口。如果后续的维护人员不了解该方法，也可能会造成混淆。

我想您将基本字体大小设置得很大，这样可以看清楚吗？您可以链接到您这样创建的网站之一，以便我们查看示例吗？

Answer 2

所以回答我自己的问题。没有必要。

您可以使用最小和最大宽度媒体查询在特定的断点处设置桌面版本的样式。

然后，您主要更新平板电脑和手机的字体大小和其他属性。就像我说的那样，这主要是为了提高可读性而增加字体大小。

但是，此方法存在主要的可维护性问题。

通过视口元标记，您可以简单地使用从台式机到移动设备的最大和最小宽度。