当旋转到横向时，HTML元素在iPad pro上不会改变宽度

为了演示这个问题，我有一个非常简单的网页，其中有一个宽度设置为100%的div元素，还有一个背景色来验证其宽度。在我看过的大多数设备（PC、智能手机、平板电脑）上，一切都和预期的一样。然而，我有一个iPad pro 11“可以在Chrome中以纵向模式正确显示页面：

但当旋转到横向模式时，它以像素为单位保持相同的宽度，并且不会延伸到新宽度的100%：

我试着搜索这个问题好几个小时，但似乎从来没有遇到任何人与我的确切问题。我遇到了无数的答案，说要对标签进行各种更改，所有这些我都试图无效。几乎就好像旋转设备并没有告诉浏览器视口尺寸已经更改。我对fron是相当陌生的t end网页设计和非常新的移动设备响应性设计，但它似乎像一个100%宽度的内联样式一样简单，应该足以满足我在这里的需要

有人能提供一些指导吗

---

编辑：我发现我最初可以以横向模式加载页面，并获得所需的100%宽度，但当我旋转到纵向时，我遇到了相反的问题-元素延伸到屏幕边缘之外的右侧。这似乎只发生在这种特定型号的iPad（Pro 11）上.

我的诀窍是让HTML正文占据整个页面，同时让孩子们表现出负责任的行为：

body { 
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}

那么体内的子div可能是：

div {
    background: red;
    height: 20px;
    width: 100%;
}

这里的技巧基本上是通过浏览器的视口使身体响应，并允许孩子们在身体内部流动

---

小贴士：试着温习一下CSS3的Flex和Grid模型，这是当今的标准，可以让您实现灵活的布局。

谢谢您的回复！不幸的是，我添加了这些样式，得到了相同的结果。