我正在 iPhone XS、iOS 15.6.1 上进行测试
似乎可以在 iOS Safari 上使用（在 Android 上未经测试），但当我将屏幕从横向旋转到纵向时，我在 Chrome 中遇到问题，内容似乎被裁剪为之前横向模式的视口高度。
我在 Google 支持上发现了 此错误。但是我不认为这是问题所在，因为该帖子中给出的示例似乎不再存在问题。
我的问题是可能的，因为我使用 javascrip 设置 html/body/container 元素的高度，这是由于 100vh 视口问题与 URL 栏（及其大小调整）结合的已知问题。尽管调整浏览器大小时内联值会更新，但在 iOS Chrome 上更改方向时可能不会这样做？
如果设备旋转，我是否可以/应该使用类似下面的代码再次运行？
window.addEventListener("orientationchange", (event) => {
console.log(`the orientation of the device is now ${event.target.screen.orientation.angle}`);
});
const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', documentHeight)
documentHeight()/**
* Base `body` styling.
*
* 1. Fix for viewport height/address bar issue on iOS Safari. The height of the
* container is set with javascript.
* 2. As we have `overflow: hidden` on the `html` element, we allow the page to
* overflow on smaller viewports below hiding again on wider viewports.
*/
html {
height: 100vh;
height: var(--doc-height); /* [1] */
overflow: hidden; /* [2] */
}
/**
* Base `body` styling.
*
* 1. Fix for viewport height/address bar issue on iOS Safari. The height of the
* container is set with javascript.
*/
body {
height: 100vh;
height: var(--doc-height); /* [1] */
margin: 0;
padding: 0;
}
/**
* Grid
*
* 1. Fix for viewport height/address bar issue on iOS Safari. The height of the
* container is set with javascript.
*/
.grid {
background: red;
height: 100vh;
height: var(--doc-height);
}<html>
<body>
<div class="grid"></div>
</body>
</html>对我有用的解决方法是......
setTimeout(()=>{
// any code that depends on innerWidth and innerHeight values
// i needed to set a delay of at least 55 milliseconds while testing on my local machine
}, 55)