视口元标记真的必要吗？

Question

我已经创建了一些响应式网站，但对于响应式网站开发还比较新。在我的CSS中，99％的值都是使用em或百分比表示的。我正在使用媒体查询（包括max-width和max-device-width）来进行布局更改。我没有包含viewport meta标签，在iOS上以及我测试过的许多Android手机和平板电脑以及所有桌面浏览器上都可以完美地工作。

添加meta标签会破坏我的网站。我是做错了什么，还是做对了，所以不需要包含它？我很困惑为什么这似乎是最佳实践，因为它破坏了我的东西。

我有什么遗漏吗？

- Jeffpowrs

---

只有在您想要按默认方式使用它时才是必需的。 - user402843

Answer 1

在桌面操作系统上，浏览器视口是一定数量的像素宽度，网页内容按原样呈现在其中。

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

viewport meta标签允许你告诉移动浏览器这个虚拟视口的大小。如果您并没有真正为移动端更改站点设计，而且使用更大或更小的虚拟视口渲染效果更好，那么这通常很有用。(我认为选择980像素作为默认值是因为它可以很好地呈现2007年的许多知名站点; 对于任何给定的站点，不同的值可能更好。)

个人而言，我总是使用<meta name="viewport" content="width=device-width, initial-scale=1">，使虚拟视口与设备尺寸相匹配。（请注意，initial-scale=1 似乎是必需的，以使虚拟视口适应 iOS 的横向模式。）这使得移动浏览器的行为与桌面浏览器一直保持一致，这也是我习惯的方式。

如果没有视口元标记，您的网站将呈现为设备的默认虚拟视口。我不认为这一点一定是一个问题，特别是如果你说所有的单位都是 em 或百分比。但如果您需要在任何时候考虑像素，可能会有些困惑，尤其是因为不同的浏览器可能具有不同大小的默认虚拟视口。如果后续的维护者不理解这种方法，这也可能会令人困惑。

我想象你将基础字体大小设置得相当大，这样它就可以清晰可读了？你能否链接到你创建的其中一个网站，这样我们就可以看到一个例子？

- Paul D. Waite

---

目前没有任何正在运行的项目，我正在开发一个项目，预计一个月或两个月后上线。我不想链接到开发网站 :( - Jeffpowrs

@JeffPowers：好的。如果您能在某个地方放置一个示例页面，那就太好了，这样其他遇到同样问题的人就可以更详细地查看您的方法。 - Paul D. Waite

谢谢，这让我想起来要检查一下，而且我已经按照规定完全使用了这个标签。对我来说问题是我必须在Chrome上滚动缩放，然后点击重置为默认值。（ctrl-0不起作用）。请参见此答案http://stackoverflow.com/questions/43393613/bootstrap-4-mobile-width-too-wide，了解我如何找到此页面作为解决方案，它引导我找到了问题，谢谢。 - blamb

Answer 2

没有视口（viewport）的情况下，您的设备将使用虚拟视口（virtual viewport），默认情况下，这是您网站的缩小版本，在iPhone上约为980像素，在安卓上约为800像素。一旦您设置了视口并禁用了此缩放功能，设备会按照应有的方式处理网站，在不同设备和方向等条件下，宽度大约为480像素或320像素。

以下是完整资源链接，我的建议是，每当您在处理响应式和移动端时，先设置视口。这是规范化设备缩放和确保您的网站以实际设备宽度显示而不是任何虚拟宽度的最佳方法。

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml

- JamieM23

---

我的建议是无论何时你在处理响应式设计和移动端问题时，都要先设置视口。你能否举一个我们如果不这么做可能会遇到的问题的例子？ - Paul D. Waite

当屏幕方向发生改变（纵向<-->横向），会发生什么？ - BCDeWitt

当您切换方向时，设备宽度将被重新计算，因此新的@media引用将匹配新的宽度并生效。 - JamieM23

Answer 3

所以回答我的问题。这是不必要的。

您可以使用min和max宽度媒体查询来在特定断点处为桌面版设置样式。

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

但是，这种方法存在一个重大的可维护性问题。

Viewport元标记允许您简单地使用从台式机到移动设备跨度的最大和最小宽度。

- Jeffpowrs

---

视口(meta)标签允许您使用跨越从桌面到移动设备的最大和最小宽度。省略这个标签将如何阻止您这样做？ - Paul D. Waite

由于许多设备模拟比设备屏幕更大的视口，因此媒体查询从未被触发，因为它们认为您正在使用较大的屏幕。 - Alan Piralla

不对。没有那个meta标签，"基于设备"的媒体查询也会触发。例如@media (max-device-width: 300px) {...}。 - Jeffpowrs

你好Jeff。我对此很感兴趣，因为我和你当时处于同样的位置：我认为meta标签viewport主要是因为“每个人都这么做”而被使用。所以，你能否详细说明一下你测试过什么来证实这一点呢？ - Hector Ordonez

你是否曾经成功添加过它而不会破坏你的网站？你没有说明是什么导致了破坏或者使用了哪个元标签。 - 1.21 gigawatts

Answer 4

您应该绝对使用视口标签，因为它们可以使网页开发人员的生活变得无比简单。它们允许您轻松控制任何屏幕（甚至在桌面上）的精确渲染尺寸和/或缩放级别。这使得为任何设备构建网站变得易如反掌。但请知道，伴随着巨大的权力而来的是巨大的责任。明智地使用这种力量（并不要禁用缩放）。

- Mr. Hugo

Answer 5

并非所有设备都支持，但对于移动设备来说是可以的。 移动浏览器会在一个虚拟“窗口”中呈现网页，该窗口通常比屏幕宽，因此他们不需要把每个页面布局压缩到一个小窗口中（因此会导致一些未经过移动优化的网站出现问题，用户必须进行缩放）。移动Safari引入了“视口元标签”，以便让Web开发人员控制视口的大小和缩放。现在所有移动浏览器都支持该标签，即使它不是任何Web标准的一部分。 一个典型的移动优化网站应包含以下标签：

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

宽度属性控制视口的大小。以100%比例缩放时，CSS像素屏幕的宽度。当页面首次加载时，initial-scale属性控制缩放级别。maximum-scale、minimum-scale和user-scalable属性控制用户是否允许缩放页面。请参考https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19。

- Shantanu

---

“not part of any web standard” — 它在此处定义（https://wiki.whatwg.org/wiki/MetaExtensions），该处被引用（https://www.w3.org/TR/html5/document-metadata.html#other-metadata-names）。 - Quentin

您可以在该维基页面上查看，规范链接显示为“工作草案”。它字面上说：“本节不属于规范”。https://drafts.csswg.org/css-device-adapt/#viewport-meta - Shantanu

Answer 6

您仍然可以使用视口元标记来优化设备视图的分辨率，并使用户能够缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0
">

通过定义最大比例，您可以控制用户缩放的方式。我认为我们应该启用此选项，因为即使是响应式网站，我也希望进行缩放，这已经成为了一种直觉，变得非常自然而然。

- Alexandre Magno Teles Zimerer

Answer 7

是的，这是开发响应式网站所必需的标签。然而，仅使用该标签并不能帮助您实现这一目标，但它们确实能够通过允许您控制网页上可见内容的大小来更轻松地开发响应式网站。

- aditya

Answer 8

对于那些有疑问的人，最简单的方法是在不使用它的情况下进行测试。我这样做，并迅速得出结论 - 如果我只能保留一个元标记，那么这将是它（高于“描述”和其他任何内容）。实际上，如果我必须在这个和所有其他元标记之间做出选择，我会放弃所有其他元标记。只需测试它！

- lucian

Answer 9

是的，这是必需的。 当人们开始在桌面浏览器上浏览网页（在1990年代），每个人都有低分辨率屏幕，如640×480或800×600。
但是，2007年，iPhone发布了。它的屏幕分辨率为320×480，比大多数桌面屏幕要低。因此，请考虑以下HTML代码：

<!DOCTYPE html>
<html>
<img src="/reallylargeimg.jpeg" style="width:640; height:480;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ex, sagittis id erat nec, imperdiet posuere erat. Mauris pharetra neque quis venenatis sagittis.</p>
</html>

然后，由于图像真的很大，网页比iPhone还要大。此外，它使用静态宽度和高度。

因此，他们缩小了页面。没有视口标签，它看起来非常糟糕，就像上面那样。

苹果还发布了视口标签。在这里，您可以设置自定义设备宽度： <meta name="viewport" content="width=200px" /> 这将屏幕宽度设置为200像素。更广泛使用的解决方案是： <meta name="viewport" content="width=device-width" /> 它将宽度设置为屏幕宽度。

但我们也想控制比例。以下是方法：添加“initial-scale”属性。我们有如下内容：
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
没有这个标签，网站看起来非常小，迫使用户放大。但是有了这个标签，一切问题都得到解决。

所以，是的，所有网站都应该使用meta viewport标签，如果你想要良好的用户体验，这是必需的。您可能还需要使用媒体查询来针对不同的屏幕宽度更改CSS，例如将菜单栏折叠成汉堡菜单。meta viewport标签不会为您执行此操作，但您应该这样做。

@media only screen and (max-width: 600px) {
  #hamburgermenu {
    display:block;
  }
  #menubar {
    display:none;
  }
}
@media only screen and (min-width: 600px) {
  #hamburgermenu {
    display:none;
  }
  #menubar {
    display:block;
  }
}

所以完成的页面应该看起来像这样。这是一个简单的网站示例，但它应该按预期工作：在600px显示菜单，在600px以上显示菜单栏。

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      console.log('closed!');
      content.style.display = "none";
    } else {
      content.style.display = "block";
      console.log('opened!');
    }
  });
}

@media only screen and (max-width: 600px) {
  #hamburgermenu {
    display: block;
  }
  #menubar {
    display: none;
  }
}

#hamburgermenu {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: aqua;
  border: 1px solid black;
}

@media only screen and (min-width: 600px) {
  #hamburgermenu {
    display: none;
  }
  #menubar {
    display: block;
  }
}

li {
  list-style: none;
  cursor:pointer;
}

li::before {
  content: "→  ";
  user-select: text;
  -o-user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
}

::selection {
  background-color: #b3d4fc;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
  <!--over here-->
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>demo</title>
</head>

<body>
  <div id="hamburgermenu">
    <button class="collapsible">Open Menu</button>
    <ul style="display:none;">
      <li onclick="console.log('option 1!'); alert('1');">Option 1</li>
      <li onclick="console.log('option 2!'); alert('2');">Option 2</li>
      <li onclick="console.log('option 3!'); alert('3');">Option 3</li>
    </ul>
  </div>
  <div id="menubar">
    <button onclick="console.log('option 1!'); alert('1');">Option 1</button>
    <button onclick="console.log('option 2!'); alert('2');">Option 2</button>
    <button onclick="console.log('option 3!'); alert('3');">Option 3</button>
  </div>
  <br>
  <p>Resize the window to see the media query effect.
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ex, sagittis id erat nec, imperdiet posuere erat. Mauris pharetra neque quis venenatis sagittis.</p>
</body>

</html>

- Someone_who_likes_SE