Question

我有一个客户端提供的宽度为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>

由于

Answer 1

没有。

当第一部iPhone发布时，它需要能够显示设计用于在具有更大显示器的计算机上查看的网页。由于这几乎是所有网站，因此默认执行缩放技巧以假装显示尺寸。

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

在计算机屏幕尺寸的显示器上从不需要这样做，因此在移动浏览器之外从未引入过对meta视口的支持。

Answer 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

Answer 3

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

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

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

使用桌面浏览器的元视口标记设置视口

3 个答案:

TL; DR