css – 视口元标记真的有必要吗？

我创建了一些响应网站，但对响应网站开发是新的。在我的CSS 99％的值是ems或百分比。我使用媒体查询(max-width和max-device-width)来更改布局。我没有包含视口元标记，它在iOS，我测试过的一些Android手机和平板电脑，以及所有的桌面浏览器上完美。

添加元标记会打破我的网站。我做错了事，或做正确的事情，使我不需要包括它？我很困惑为什么它似乎是一个最佳实践，因为它打破了我的东西。

我缺少什么？

解决方法

在桌面操作系统上，浏览器视口的像素宽度固定，并且网页内容会按原样显示。

从iOS上的Safari开始(或者当时我们应该称之为iOS)，移动浏览器视口已经是“虚拟的”。尽管视口在接口中可能仅占用(例如)320个物理像素的空间，但是浏览器创建了更大的“虚拟”视口(默认情况下，在iOS上为980像素宽，我认为)并且在其中呈现内容，然后放大虚拟视口，直到它适合设备屏幕上可用的实际物理像素。

视口元标记允许您告诉移动浏览器此虚拟视口应该是什么大小。如果您实际上并未更改移动设备的网站设计，并且通过更大或更小的虚拟视口呈现更好的效果，这通常很有用。 (我相信选择了980像素作为默认值，因为它在2007年很好地渲染了许多高调的网站;对于任何给定的网站，不同的值可能更好)

就个人而言，我总是使用< Meta name =“viewport”content =“width = device-width，initial-scale = 1”>以便虚拟视口匹配设备尺寸。 (注意initial-scale=1 seems to be necessary to make the virtual viewport adapt to landscape mode on iOS.)这使得移动浏览器的行为像桌面浏览器总是有，这是我习惯。

没有视口元标记，您的网站将被渲染到设备的默认虚拟视口。我不认为这是一个问题，特别是如果你的单位是ems或百分比，你说。但是如果你需要在任何点上想像素，可能会有点混乱，特别是因为不同的浏览器可能有不同大小的默认虚拟视口。如果他们不理解这种方法，它也可能使后续维护者感到困惑。

我想象你设置你的基本字体大小相当大，使它的清晰？您能否链接到您创建的其中一个网站，我们可以看到一个例子？

原文地址：https://www.jb51.cc/css/220693.html