Поместите элемент в центр экрана, даже если мобильное устройство увеличено (CSS или JS)

Question

Пользователь находится на моей веб-странице и нажал клавишу. Эта клавиша вызывает скрытый div, который становится видимым и отображает сообщение в центре экрана.

В настольных браузерах я могу легко добиться этого:

.notif-div{
  background-color: #000;   
  position:fixed;
  top:50%;
  left:50%;
  z-index:60;
  visibility: hidden;
}

Это прекрасно работает, даже если браузер увеличен.

Однако , в браузерах на мобильных устройствах, таких как Chrome или Safari для iPad Pro - которые допускают явно особую форму масштабирования - у меня пока нет нашел метод, который способен надежно разместить div в центре экрана пользователя.

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

Та же проблема верна, если, например, я пытаюсь исправить элемент вверху или внизу страницы - он работает нормально, пока мобильный пользователь не увеличит масштаб.

Кто-нибудь нашел CSS или JavaScript решение проблемы мобильного масштабирования?

Answer 1

Для меня решение было комбинацией этого ответа, который предлагал абсолютное, а не фиксированное размещение с наблюдателями для обнаружения scroll / zoom , а затем этого ответа, который помещал абсолютный элемент в середина экрана вместо фиксированного элемента .

Так что в CSS у меня есть:

.notif-div{
    background-color: #000;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    transform: translate3d(0,0,0);
    z-index:60;
    visibility: hidden;
    padding:4px;
}

В JavaScript у меня:

    function rePosition() {
        var drag = document.getElementById("drawmessage");

        drag.style.left = window.innerWidth/2 + window.pageXOffset + 'px';
        drag.style.top = window.innerHeight/2 + window.pageYOffset + 'px';
    }

    window.addEventListener('scroll', function(e){
        rePosition();
    })

А потом в HTML у меня есть:

<div class="notif-div" id="drawmessage">Hello</div>

И в результате я вижу сообщение, которое я показываю в этом div, даже когда я сильно увеличен на мобильном телефоне: