#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/…