Question

我创建了一些响应式网站，但对响应式网站开发来说却是新手。在我的CSS中，99％的值都是ems或百分比。我正在使用媒体查询（max-width和max-device-width）来进行布局更改。我没有包含一个视口元标记，它在iOS，我测试的许多Android手机和平板电脑以及所有桌面浏览器上运行良好。

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

我错过了什么吗？

Answer 1

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

从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或百分比。但是如果您需要在任何时候考虑像素，可能会有点混乱，特别是因为不同的浏览器可能具有不同大小的默认虚拟视口。如果后续维护人员不理解这种方法，也可能会让人感到困惑。

我想你设置的基本字体大小非常大，所以它清晰可辨？你能链接到你创建的其中一个网站，所以我们可以看到一个例子吗？

Answer 2

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

以下是完整资源，我的建议是，每当您使用响应式＆amp;移动，始终先设置视口。这是规范设备缩放并确保使用实际设备宽度而不是任何虚拟宽度显示网站的最佳方式。

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

Answer 3

所以回答我自己的问题。没有必要。

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

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

此方法虽然存在严重的可维护性问题。

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

Answer 4

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

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

width属性控制视口的大小。 CSS像素中屏幕的宽度，缩放为100％，初始缩放属性控制首次加载页面时的缩放级别。最大规模，最小规模和用户可扩展属性控制用户如何放大或缩小页面。

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

Answer 5

您绝对应该使用视口标记，因为它们能够使Web开发人员的生活变得无比简单。它们允许您轻松控制任何屏幕的精确渲染尺寸和/或缩放级别（如果需要，甚至可以在desktop上）。这使得为任何设备构建网站都是件小事。但要知道，强大的力量带来了巨大的责任。明智地使用此功率（并且不要禁用缩放）。

Answer 6

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

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

通过定义最大比例，您可以控制用户如何缩放它。我应该启用此选项，因为即使有一个响应式网站，我希望放大，它已经知道，它已经变得如此直观，成为期待。

Answer 7

是的，它是开发响应式网站的必要标记。但是单独使用标记无法帮助您这样做，但它们确实可以通过允许您控制可见内容的大小来更轻松地开发响应式网站你的网页。

Answer 8

对于任何有疑问的人，最简单的方法就是在没有它的情况下进行测试。我这样做了，很快就解决了-如果我只需要保留一个meta标签，就是这样（在“ description”（描述）之上）。实际上，如果我只能在这一个和所有其他之间做出选择，我会全力以赴。只需测试！

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还大。此外，它使用静态宽度和高度。

所以他们缩小了页面。没有视口标签，看起来真的很糟糕，就像上面一样。

Apple 还发布了视口标签。在这里，您可以设置自定义设备宽度： <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" />
没有这个标签，网站看起来很小，迫使用户放大。但有了这个标签，一切都解决了。

所以是的，元视口标签应该在所有网站上使用，如果您想要良好的用户体验，这是强制性的。您可能还需要使用媒体查询来更改不同屏幕宽度的 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>

谢谢。

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

9 个答案: