100ВЧ проблема с iOS Safari

Веб-контент выходит за пределы просмотра, хотя мы использовали 100ВХ (Красная непрозрачность с 100VH текст).

.section {
    height: 100vh; // bad approach 
}

Проблема, которую вы получаете после добавления Высота: 100ВХ к мобильным разрешениям. Это происходит из-за метода расчета, который использует Safari и Chrome. Мобильные устройства Calc Browser Viewport AS ( Top Bar + Документ + Нижняя Бар ) = 100ВХ Отказ Мне было трудно с 100ВХ Когда страница должна иметь раздел заполнить весь экран. Через пару часов я нашел решения, которые я вам покажу.

Это два решения, первые нужны JavaScript и CSS, второе решение требует только CSS.

1. Решение JS & CSS

Давайте начнем сначала с файлом JS:

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

appheight Функция имеет устанавливает новый стиль свойства VAR ( - App-Height ), включая высоту текущего окна, --app-высота Это необходимо для следующих шагов.

:root {
   --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
}

На предыдущем шаге я создал ссылку --app-высота , упаковка в var () Я получил переменную CSS var (- высота приложения) . Эта переменная разрешена читать значения, созданные JS.

2. CSS-решение (не рекомендую)

Последнее, но не наименее решение – --webkit-fill - доступно Этот раствор работает только на устройствах Apple, он не решит проблему на устройствах Android. Я не рекомендую это решение, но стоит показывать.

height: 100%;
height: -webkit-fill-available;

Спасибо за Ваше внимание! Я буду признателен за ваши отзывы.

Если вам нравится эта статья, следуй за мной в Twitter @Maciejdev.

Оригинал: “https://dev.to/maciejtrzcinski/100vh-problem-with-ios-safari-3ge9”

1. Решение JS & CSS

2. CSS-решение (не рекомендую)

Читайте ещё по теме: