Блог

Главная - Вопросы по программированию - Как остановить скачок фона фиксированной страницы на мобильном устройстве

Как остановить скачок фона фиксированной страницы на мобильном устройстве

#html #css

#HTML #css

Вопрос:

У меня есть фоновое изображение на всю высоту и ширину страницы для страницы, предназначенное для покрытия задней части окна просмотра, которое также адаптируется к размеру окна просмотра. Это блестяще работает на рабочем столе, однако на мобильных устройствах (как iPhone, так и Android), когда адресная строка и панели навигации скрыты (поведение браузера по умолчанию), при прокрутке вниз фоновое изображение переходит (как показано ниже):

https://ibb.co/7jWLqWh

Код, который я использую для этого:

HTML:

 <div id="bg">
  <img src="../../assets/landing-page/bg.png" alt="">
</div>

CSS:

 #bg {
      position: fixed; 
      top: -32%; 
      left: -90%; 
      width: 200%; 
      height: 200%;
      background-color: #FFFFFF;
    }
    
    #bg img {
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        margin: auto; 
        min-width: 50%;
        min-height: 50%;
        opacity: 0.75;
    }

Комментарии:

1. Возможно, вместо выравнивания по краям, центрирование могло бы решить эту проблему. Это, по крайней мере, немного облегчит внезапное смещение.

Ответ №1:

При использовании значений%, когда внезапно появляется больше места из-за исчезновения панели браузера, размер внезапно увеличивается.

Чтобы обойти эту проблему, поставщики решили исправить единицу высоты vh. Хотя это может вызвать другие проблемы, например, у divs полной высоты 100vh нижняя часть обрезается при входе на веб-сайт, это было разработано, чтобы помочь смягчить проблему с прокруткой, которая наблюдается здесь.

Предлагается попробовать определить высоты в единицах vh, а не в%s, чтобы посмотреть, исправит ли это ситуацию.