Обнаружение VH на мобильном телефоне в JS и возвращает его текущее значение - PullRequest
Новая
       85

Обнаружение VH на мобильном телефоне в JS и возвращает его текущее значение

0 голосов
/ 01 сентября 2018

Моя проблема - взломать сомнительное несоответствие мобильного браузера между 100vh и областью, скрытой за панелями мобильного браузера. Это проблема для любой страницы, где требуется полноэкранный эффект.

Хак обнаруживает разницу между VH и фактическим видимым окном просмотра. Однако простое js в первом примере кода, похоже, обнаруживает его в обратном направлении. Таким образом, если панель браузера перекрывается, значение должно быть 75, но вместо этого 0 - также, когда браузер большой, он должен вернуть 0, но вместо этого возвращает -75.

Это можно воспроизвести, просто протестировав iPhone с помощью инструмента «Разработка» в Safari на google.com и введя его в консоль. 

document.documentElement.clientHeight - window.innerHeight

Похоже, что это вычисляет более короткую высоту браузера с верхним смещением, чтобы компенсировать смещение панели браузера на 0 и высоту браузера, когда панель браузера больше не покрывает верх страницы на -75px. Мне кажется, что это очень неправильно и должно быть 75 и 0 соответственно. Ниже приведен пример того, как, по моему мнению, должно работать правильное смещение тега body для позиционирования элементов с абсолютным позиционированием. 

function fixIt(){
    var offset = (document.documentElement.clientHeight - window.innerHeight);
    document.body.style.marginTop = offset;
}
fixIt(); // run on resize

Мое дополнительное супер хакерское решение - сместить тело по умолчанию на 75 пикселей и назначить старое значение для вертикального изменения размера. (поэтому, когда панели браузера скрываются, вместо смещения 75px, используйте предыдущее смещение 0 и сохраняйте смещение 75px для следующего изменения размера). Работает в Mobile Chrome и Mobile Safari, но, например, если ссылка открыта в Facebook, где нет панели браузера и нет событий изменения размера, она постоянно смещается на 75 пикселей. Этот код явно безумен и должен быть изгнан в ничто. 

var offset;
var oldOffset = 75px;
function fixIt(oldOffset){
    offset = (document.documentElement.clientHeight - window.innerHeight);
    document.body.style.marginTop = oldOffset;
    oldOffset = offset;
    return oldOffset;
}
fixIt(oldOffset); // run on resize

В качестве отступления или дальнейшего прочтения, вот большой блог с жалобами по этому вопросу. https://nicolas -hoizey.com / 2015/02 / viewport-height-is-ts-is-ts-is-t-on-the-чуть-чуть-больше-видимый-часть-документа-в-некоторых-mobile-browsers.html I согласен с поставщиками браузеров в том, что VH должен быть постоянным (потому что перекомпоновка была бы неприятна для всего, кроме фактического роста), но для элементов верхнего уровня, таких как body и html-теги на мобильных устройствах, это поведение кажется неправильным и не имеет смыслового смысла Кроме того, эти вычисленные числа появляются в обратном направлении, что еще больше усиливает эту проблему.

Какие есть еще решения?

...