Моя страница использует vh для правильного отображения, однако она не работает на мобильных устройствах.
Я пытался применить этот сайт , чтобы сделать мою страницу совместимой с мобильными устройствами, но это похоже, не работает.
Вот фрагмент кода, который они используют:
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
А затем в css мои элементы объявляют:
height: calc(100vh - 100px); /*fallback*/
height: calc(var(--vh, 1vh) - 100px);
Но высота элементов равна и остается 0. Когда я удаляю вторую строку, она работает корректно (очевидно, не на мобильном телефоне).
Проверьте мой код здесь: https://codepen.io/cypherfirelair/pen/yLYNMKY