Установка другой высоты / ширины для мобильного сайта

Question

Я только что создал свое портфолио и хочу, чтобы в полноэкранном режиме на мобильном сайте отображалось сообщение «скоро» и т. Д. При просмотре моего сайта на мобильном устройстве.

Я пробовал это с медиа-запросами; однако по какой-то причине рост игнорируется. Если вы зайдете на сайт и осмотрите элемент, вы увидите, что сайт по-прежнему 300 В x 300 В *.

html body {
  margin: 0;
  padding: 0;
  font-family: 'Karla', sans-serif;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 300vh;
  width: 300vw;
  background-color: #FFFFFF;
}

@media screen and (max-width: 768px) {
  body {
    height: 100vh;
    width: 100vw;
  }

  html {
    height: 100vh;
    width: 100vw;
  }
}

Мой веб-сайт 'https://nathan.work', если кто-то хочет разобраться в проблеме.

Может быть, при загрузке на мобильный телефон пользователь попадает в совершенно другой файл .html? Я не уверен, когда дело доходит до мобильной реакции.

Answer 1

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

@media screen and (max-width: 768px) {
  html {
    height: 100vh;
    width: 100vw;
    position: fixed;
  }
}