为桌面浏览器设置视口，使用meta viewport标签

Question

为桌面浏览器设置视口，使用meta viewport标签

htmlcss

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>

谢谢

- Apurva T

你能展示一下你写的东西吗？ - Bivek

我真的认为视口元素控制缩放/初始比例，而不是滚动。您可能需要在“html”或“body”上设置overflow: hidden以禁用滚动。 - AA2992

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Apurva T

3个回答

5

正如Quentin所提到的，视口并不适用于桌面设备，仅适用于移动设备。

谷歌表示：

TL;DR

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

要按照谷歌的建议进行操作，请使用：

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

我认为你需要向客户解释什么是视口(viewport)，以及为什么他们不需要将它设置为固定像素宽度。让浏览器来确定内容的宽度。

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

- Tom

谢谢，这回答得非常好 :) - Apurva T

@ApurvaT，如果Tom的回答对你有帮助甚至解决了你的问题，你应该考虑给他点赞或接受他的回答。 - LinusGeffarth

@LukasLiesis，你的链接也过期了，能否添加一个新的参考链接？谢谢。 - user31782

@user31782 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Viewport_meta_tag - Lukas Liesis

我知道viewport meta标签不适用于桌面浏览器。但是，我找不到任何关于为什么这样不起作用的信息。是否有一些标准明确要求桌面浏览器忽略viewport meta标签？ - user1768761

0

不要使用固定的视口大小，可以使用以下方法：

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

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

- Bivek

3

你的回答完全无关。 - Guichi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

第一款iPhone发布时，需要能够显示设计用于更大显示屏的网页。由于几乎所有网站都是这样的情况，因此它默认执行缩放技巧以伪造具有该大小的显示屏。

引入了Meta viewport，以便作者可以告诉iPhone他们知道自己在做什么，并考虑过移动设备的尺寸。

在计算机屏幕大小的显示器上从未需要过这种功能，因此除了移动浏览器外，没有引入对Meta viewport的支持。