为什么某些全屏网站宽度与我的屏幕宽度不匹配？

Question

我使用1920像素宽的屏幕。但是，当我在诸如Firebase或Facebook Messenger的网站上使用chrome devtools检查html标签时，这就是我所看到的：

但是这些网站全屏显示，因此我希望它们与我的屏幕宽度相匹配。

为什么我的屏幕宽度（1920像素）和html标签宽度（1440像素）之间存在差异，以及如何实现这一点？

Answer 1

您已经在PC上设置了DPI缩放比例，或者在浏览器中将缩放级别设置为高于100％

Answer 2

如果将HTML正文的宽度设置为1440px的固定宽度，则即使用户屏幕大于或小于1440px，也将为1440px。您可以将宽度设置为width: 100%;和max-width: 1440px。如果屏幕小于1440像素，则主体的大小将变为屏幕的大小；如果屏幕大于或等于1440像素，则主体的大小将变为屏幕的大小。

如果我正确地理解了您的要求，那么您将拥有一个侧边栏菜单和一个仪表板，需要完全填充屏幕。在这种情况下，您可以执行以下操作：

.side-menu {
  width: 20%;
}

.dashboard {
  width: 80%;
  max-width: 1440px;
}

@media (min-width: 1500px) {
  .side-menu {
    width: 100%
  }
}

使用media-query使您可以为HTML中的元素设置不同的CSS属性，在此示例中，取决于屏幕大小。我做了什么：如果屏幕尺寸小于1440像素，则侧边栏将填充20％的内容，而仪表板将填充80％的内容。如果屏幕尺寸大于或等于1500px（比仪表板的最大宽度稍大，也可以容纳边栏），则仪表板将保持1440px，并且边栏将填充屏幕宽度的其余部分（{{1 }}使侧边栏占据主体左侧的所有宽度。

显然，在较大的网站（如Facebook等）中，这比CSS复杂得多，因为他们必须考虑数据流，用户使用的设备以及许多其他事情。