Как определить фактическую ширину и высоту видового экрана на iOS

Я застрял в такой простой задаче, как определить ширину и высоту страницы в iOS, когда страница была увеличена пользователем.

Проблема в том, что некоторые веб-сайты имеют странный макет и выглядят следующим образом:

Это не масштабированная страница, и она имеет разрешение 1164x1811 пикселей и это правильно. У меня эти значения от window.innerWidth и window.innerHeight. Выделенная область является элементом тела и имеет разрешение 1024x1594 пикселей, что имеет значение.

Далее я использую масштабирование для увеличения страницы, и вот как это выглядит:

Теперь, когда я пытаюсь получить размер страницы, я получил 1024x1594 пикселей от window.innerWidth и window.innerHeight соответственно. Эти значения одинаковы с размером тела.

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

Я также проверил этот конкретный случай в Chrome и получил правильный результат: он всегда имеет 1164x1811 пикселей независимо от масштабирования.

Ответы

Ответ 1

EDIT: Используйте document.body.clientWidth и document.body.clientHeight, чтобы получить нужные вам вычисления, так как мои оригинальные решение считается устаревшим.

Вы можете использовать ~~document.width и document.height~~, чтобы получить исходный размер страницы на Safari iOS, даже если у вас увеличен масштаб.

Здесь тест на старом Space Jam site (который приходил в голову при попытке думать о сайте, который определенно не был бы отзывчивый).

Ответ 2

Здесь более сложный, но любопытный бесполезный способ: Создайте элемент размера страницы, затем вычислите/получите его фактический размер.

let page_size = { height: null, width: null };
{
    let div = document.createElement('div');
    (styles => Object.keys(styles).forEach(k => div.style[k] = styles[k]))({
        height: '100vh', width: '100vw',
        position: 'fixed',
        top: '-100vh', left: '-100vw'
    })
    document.body.appendChild(div);
    page_size.height = div.offsetHeight;
    page_size.width = div.offsetWidth;
}