我创建了一些响应网站，但对响应网站开发是新的。在我的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或百分比，你说。但是如果你需要在任何点上想像素，可能会有点混乱，特别是因为不同的浏览器可能有不同大小的默认虚拟视口。如果他们不理解这种方法，它也可能使后续维护者感到困惑。
