使用桌面浏览器的元视口标签设置视口答案

【问题标题】：set viewport using meta viewport tag for desktop browsers使用桌面浏览器的元视口标签设置视口
【发布时间】：2016-09-14 08:20:10
【问题描述】：

我有一个客户提供的网站，宽度为 1440 像素。客户要求我将视口设置为 1440 像素，使用对于桌面浏览器，小于 1440 像素的屏幕不会显示滚动条。

它适用于移动、ipad 设备，我们可以使用它来设置视口。这也适用于桌面浏览器吗？

我尝试使用它设置视口，但可以看到滚动条。有人可以对此提供一些想法。

代码：

   <!DOCTYPE html>
     <html>
     <head>
     <meta name="viewport" content="width=1440">

     </head>
    <body>
<div style="width:1440px;">
    test content
 </div>


 </body>
</html>

谢谢

【问题讨论】：

你能告诉我们你写了什么吗？
我真的认为视口元控制缩放/初始比例。不滚动。您可能需要在 html 或 body 上设置 overflow: hidden 以禁用滚动。
已将代码添加到原始帖子中，我不想添加溢出：隐藏以隐藏额外内容。我的意思是桌面浏览器的视口可以使用meta viewport标签进行调整。

标签： html css

【解决方案1】：

没有。

当第一款 iPhone 发布时，它需要能够显示专为在具有更大显示屏的计算机上查看而设计的网页。由于这几乎是所有网站，它默认执行缩放技巧来伪造具有该尺寸的显示。

引入了元视口，以便作者可以告诉 iPhone，他们知道自己在做什么，并且实际上考虑过移动大小的设备。

在计算机屏幕大小的显示器上从来不需要这样，因此在移动浏览器之外从未引入对元视口的支持。

【讨论】：

【解决方案2】：

正如 Quentin 所说，视口不适用于桌面设备。它仅适用于移动设备。

谷歌说：

TL;DR

使用元视口标签来控制浏览器视口的宽度和缩放。包括 width=device-width 以匹配与设备无关的像素中的屏幕宽度。包括 initial-scale=1 以在 CSS 像素和与设备无关的像素之间建立 1:1 的关系。通过不禁用用户缩放来确保您的页面可访问。

按照 Google 所说的使用：

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

我认为您需要向您的客户解释视口的用途以及为什么他们不应该/不需要将其设置为固定像素宽度。允许浏览器确定内容的宽度。

参考：https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en

【讨论】：

谢谢...这很好地回答了我的问题:)
@ApurvaT，如果汤姆的回答对您有帮助甚至回答了您的问题，您应该考虑投票/接受。
@LukasLiesis 您的链接也已过期，您可以添加新的参考吗？干杯。
@user31782 developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

【解决方案3】：

不要使用固定大小的视口，而是使用这个：

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

这将自动检测正在使用的设备的屏幕宽度并显示网页。希望能解决您的问题。

【讨论】：

你的回答完全无关