Окно Chrome для iOS.внутренняя высота установлена неправильно после изменения ориентации

#ios #google-chrome #viewport

Вопрос:

Вот самое простое приложение react, чтобы проиллюстрировать это без применения какого-либо стиля вообще:

 import * as React from 'react'

function App() {
    const [message, setMessage] = React.useState(getString())
    React.useEffect(() => {
        const handleResize = () => {
            setMessage(getString())
        }
        window.addEventListener('resize', handleResize)

        return () => window.removeEventListener('resize', handleResize)
    })

    return (
        <div className="App">
            <header className="App-header">
                <p>
                    {message}
                </p>
            </header>
        </div>
    );
}

function getString() {
    return 'The viewport size is '   window.innerWidth   'x'   window.innerHeight   '.'
}

export default App;
 

Я мог бы использовать console.log, но его нелегко воспроизвести в Chrome для iOS, v94.

Если вы повернете телефон несколько раз, у вас может быть неправильный размер видового экрана, например, «414×358» для моего iPhone 11 вместо «800×358» (пейзаж) и «414×724» (портрет). В моем более крупном приложении я иногда получаю что-то вроде «800×566». Похоже, вероятность получить неправильное значение зависит от размера и сложности страницы — чем она больше, тем выше вероятность получить неправильные размеры.

Chrome для Android, Chrome для рабочего стола в режиме эмуляции или Safari не затронуты, окно просмотра всегда точно там.

Комментарии:

1. Перекрестная ссылка на форум сообщества Google — support.google.com/chrome/thread/130340151/…