使用视口标签使网络适应设备是绝对必要的吗？答案

【问题标题】：Is it absolutely essential to use viewport tag to adapt a web to devices?使用视口标签使网络适应设备是绝对必要的吗？
【发布时间】：2016-05-26 01:14:01
【问题描述】：

你好朋友，看看是否有人帮我定制我的网络设备。

我尝试了媒体查询和我的手机（我只有一个，摩托罗拉 Moto G）我设法适应，但我没有使用视口标签。我只是通过这个媒体查询来调整 CSS：

风景：

@media screen and (max-width: 1000px) and (min-aspect-ratio: 13/9) {

}

肖像：

@media screen and (max-width: 1000px) and (max-aspect-ratio: 13/9)  {

}

在我的手机上，网络是完美的，我设法适应了横向和纵向。但结果是我只有这部手机，不知道页面在其他设备上会是什么样子，把viewport标签变大了，完全变形了：

<meta name="viewport" content="width=device-width, initial-scale=1">

问题是我对此很迷茫，因为为了证明我的页面也出现了这个变形的巨人：

问题是，分辨率是 1280x720 Moto G？为什么放置视口标签会如此扭曲？没看懂，看看有没有人能解释一下。我试图在互联网上查找资料，但我无法理解。

谢谢

【问题讨论】：

CSS 中没有 viewport label 这样的东西。您发布的 CSS 无效。如果代码中包含 "landscape" 和 "Portrait" 或将它们包装为 cmets，请删除它们，如下所示：/* landscape */、/* Portrait */。如果这不能回答您的问题，请澄清它，因为不清楚您在问什么。请参阅How to Ask 页面以获得澄清此问题的帮助。
对不起，这不在我的代码中，我已指定你去见他。我编辑帖子
请提供minimal reproducible example 您的问题。现在我们无法体验它，所以我们无能为力。 “responsinator”的链接只显示一张空白的手机图片。
放置在表单左上角的网站网址以在不同设备上进行测试。我不明白的是，如果该终端的分辨率为 1136 x 640 像素，iPhone 5 的宽度是 320 像素。我不知道我是否解释自己。

【解决方案1】：

我认为你要问的是：

视口标签（元标签）是否绝对必要，因为它会扰乱您在设备上对网站的看法。

要回答这个问题，让我们看看视口标签本身：

<meta name="viewport" content="width=device-width, initial-scale=1">

这告诉浏览器将初始比例设置为视口窗口的 100%，并将 body 元素的宽度设置为设备的宽度，因此它告诉浏览器将网页的宽度 @987654324 @ 元素的宽度与查看它的设备的宽度相同。

简而言之，没有视口标签不是绝对必要的，但这是一个非常好的主意，虽然您可以更改标签的content部分的设置，例如

<meta name="viewport" content="width=500, initial-scale=1">

或

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

阅读Mozilla Developer Network page on the topic 不会出错，它会告诉您可以在视口标签中设置的可能值。这些与 CSS 显示值完全分开，并用作浏览器呈现页面的默认值。

如果您没有在问题中提供更具体的问题，我无法为您提供更具体的建议

【讨论】：