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

Question

我创建了一些响应式站点，但对响应式站点开发还很陌生。在我的 CSS 中，我 99% 的值都是以 em 或百分比表示的。我正在使用媒体查询（最大宽度和最大设备宽度）来更改布局。我没有包含视口元标记，它可以在 iOS、我测试过的许多 Android 手机和平板电脑以及所有桌面浏览器上完美运行。

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

我错过了什么吗？

score 76 · Accepted Answer

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

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

视口元标记允许您告诉移动浏览器这个虚拟视口应该是什么大小。如果您实际上并未针对移动设备更改网站的设计，这通常很有用，并且它在更大或更小的虚拟视口中呈现得更好。（我相信 980 像素被选为默认值，因为它在 2007 年渲染了许多备受瞩目的网站方面做得很好；对于任何给定的网站，不同的值可能会更好。）

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

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

我想您将基本字体大小设置得很大，以便清晰易读？您能否链接到您这样创建的网站之一，以便我们看一个示例？

score 11 · Accepted Answer

如果没有视口，您的设备将使用虚拟视口，默认情况下它实际上是您网站的缩小版本，在 iPhone 上约为 980 像素，在安卓上约为 800 像素。设置视口并禁用此缩小功能后，设备会按应有的方式处理网站，并根据设备和方向等以大约 480 像素或 320 像素的宽度进行测量。

下面的完整资源，我的建议是，每当您使用响应式和移动设备时，请始终首先设置视口。这是标准化设备缩放并确保您的网站使用实际设备宽度而不是任何虚拟宽度显示的最佳方式。

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

score 9 · Accepted Answer

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

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

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

这种方法虽然有一个主要的可维护性问题。

视口元标记允许您简单地使用从桌面到移动设备的最大和最小宽度。

score 6 · Accepted Answer

您绝对应该使用视口标签，因为它们能够让 Web 开发人员的生活变得无限简单。它们使您可以轻松控制任何屏幕的精确渲染尺寸和/或缩放级别（如果您愿意，甚至可以在桌面上）。这使得为任何设备建立网站变得轻而易举。但要知道，权力越大，责任越大。明智地使用此功能（并且不要禁用缩放）。

score 5 · Accepted Answer

并非适用于所有设备，但适用于手机。移动浏览器在虚拟“窗口”中呈现页面，视口通常比屏幕宽，因此它们不需要将每个页面布局压缩到一个小窗口中（因此它破坏了一些非移动优化的网站和用户必须飞涨）。Mobile Safari引入了“视口元标记”，让 Web 开发人员可以控制视口的大小和比例。现在所有的移动浏览器都支持这个标签，即使它不是任何网络标准的一部分。典型的针对移动设备优化的网站应包含以下标记：

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

width 属性控制视口的大小。屏幕宽度，以 CSS 像素为单位，比例为 100%，initial-scale 属性控制页面首次加载时的缩放级别。最大比例、最小比例和用户可缩放属性控制允许用户放大或缩小页面的方式。

https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19

score 3 · Accepted Answer

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

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

定义了最大比例后，您可以控制用户缩放它的方式。我认为我们应该启用此选项，因为即使使用响应式网站我希望缩放，它已经知道，它是如此直观以至于成为期望。

score 2 · Accepted Answer

是的，它是开发响应式网站的必要标签。但是，单独使用标签并不能帮助您这样做，但它们确实可以让您控制网页可见内容的大小，从而更容易开发响应式网站.

score 1 · Accepted Answer

对于有疑问的人来说，最简单的方法是在没有它的情况下进行测试。我这样做了，并迅速做出了决定——如果我必须只保留一个元标记，那就是它（在“描述”之上等等）。实际上，如果我必须在这一个和所有其他人之间做出选择，我会放弃一切。只是测试它！

score 0 · Accepted Answer

是的，这是必需的。 当人们开始在桌面浏览器上浏览时（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" />

它将宽度设置为屏幕宽度。

但我们也想控制规模。方法如下：添加“初始比例”属性。我们有这样的东西：
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
没有这个标签，网站看起来很小，迫使用户放大。但有了这个标签，一切都解决了。

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

@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;
  }
}

所以完成的页面应该是这样的。这是一个粗略的网站示例，但它应该可以按预期工作：在 600 像素处显示菜单并在 600 像素以上显示菜单栏。

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>

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

9 回答 9

Related

Reference