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

Posted 2023-03-06

技术标签:

【中文标题】视口元标记真的有必要吗？【英文标题】：Is the viewport meta tag really necessary? 【发布时间】：2013-01-24 08:58:22 【问题描述】：

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

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

我错过了什么吗？

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

“我的建议是，每当您使用响应式和移动设备时，请始终首先设置视口” - 您是否有一个如果我们不这样做可能会遇到的问题的示例？方向改变（纵向横向）会发生什么？当您切换方向时，设备宽度会重新计算，因此与新宽度匹配的新 @media 引用会生效。【参考方案2】：

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

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

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

【讨论】：

目前没有任何东西我正在制作一个将在一两个月内上线的东西。我不想链接到开发站点:( @JeffPowers：当然。如果您可以在某个地方仅粘贴一个示例页面，那也很棒，以便遇到问题的其他人可以更详细地了解您的方法。谢谢，这提醒了我检查，我已经有了这个标签，完全符合指定的要求。对我来说，问题是我必须在 chrome 上滚动缩放，然后单击重置为默认值。（ctrl-0 不起作用）。请参阅此答案***.com/questions/43393613/…，了解我如何将这个页面作为解决方案，它引导我解决问题，谢谢。 .【参考方案3】：

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

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

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

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

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

【讨论】：

“视口元标记允许您简单地使用从桌面到移动设备的最大和最小宽度。”省略标签如何阻止您这样做？因为许多设备模拟的视口大于设备屏幕，所以媒体查询永远不会被触发，因为他们认为您使用的是更大的屏幕。这不是真的。 “基于设备”的媒体查询在没有该元标记的情况下触发。例如@media (max-device-width: 300px) .... 你好杰夫。我对此很感兴趣，因为我和你的观点相同：我认真地认为元标记视口主要是因为“每个人都这样做”。那么您能否详细说明您测试的内容以确认这一点？您是否能够在不破坏您的网站的情况下添加它？您没有详细说明您使用了哪些损坏或使用的元标记。【参考方案4】：

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

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

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

【讨论】：

【参考方案5】：

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

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

width 属性控制视口的大小。屏幕宽度，以 CSS 像素为单位，比例为 100%，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

【讨论】：

"不属于任何 Web 标准" — 定义为 here，引用 here。您可以在该 wiki 页面上查看，规范链接显示“工作草案”。它的字面意思是“本节不规范”。 drafts.csswg.org/css-device-adapt/#viewport-meta【参考方案6】：

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

【讨论】：

【参考方案7】：

是的，它是开发响应式网站的必要标签。但是，单独使用标签并不能帮助您这样做，但它们确实通过允许您控制可见内容的大小，使开发响应式网站变得更加容易您的网页。

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案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 还发布了 viewport 标签。在这里，您可以设置自定义设备宽度： <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>

【讨论】：

以上是关于视口元标记真的有必要吗？的主要内容，如果未能解决你的问题，请参考以下文章

Android——PhoneGap/WebView 忽略视口元标记？

为什么视口元标记不能按预期工作

CSS中的视口元标记

使用视口元标记实现最小宽度

视口元标记在 Android 上无法按预期工作