Почему некоторые полноэкранные веб-сайты не соответствуют ширине моего экрана?

Question

Я использую широкоформатный экран 1920px.Но когда я проверяю тег html с помощью Chrome Devtools на таких веб-сайтах, как Firebase или Facebook Messenger, я вижу следующее:

Но эти сайты появляютсяв полноэкранном режиме, поэтому я ожидал, что они будут соответствовать ширине моего экрана.

Почему существует разница между шириной моего экрана (1920px) и шириной тега html (1440px) и как этого добиться?

Answer 1

Если вы установите ширину тела вашего HTML на фиксированную ширину 1440px, она будет 1440px, даже если пользовательский экран больше или меньше этого.То, что вы можете сделать, это установить ширину width: 100%; и max-width: 1440px.Таким образом, размер тела будет равен размеру экрана, если экран меньше 1440 пикселей и 1440 пикселей, если экран больше или равен 1440 пикселей.

Если я правильно понял, что вы спрашиваете, выиметь боковое меню и панель инструментов, которая должна заполнить весь экран.В этом случае вы можете сделать:

.side-menu {
  width: 20%;
}

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

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

Использование media-query заставляет вас устанавливать различные свойства CSS для элементов вашего HTML, в зависимости, в этом примере, от размера экрана,Что я сделал: если размер экрана меньше 1440 пикселей, боковая панель заполняет его на 20%, а панель приборов - на 80%.Если размер экрана больше или равен 1500 пикселей (немного больше, чем максимальная ширина панели управления, чтобы соответствовать боковой панели), панель остается на 1440 пикселей, а боковая панель заполняет остальную часть ширины экрана (width: 100%заставляет боковую панель занимать всю ширину, оставшуюся от тела).

Очевидно, что на больших сайтах, таких как Facebook и т. д., это гораздо более сложное мышление, чем просто CSS, потому что они должны учитывать поток данных, устройствочеловек использует и многое другое.

Answer 2

Либо вы настроили масштабирование DPI на своем ПК, либо установите в браузере уровень масштабирования выше 100%