旋转到横向时，iPad Pro 上的 HTML 元素不会改变宽度

Question

为了演示这个问题，我有一个非常简单的网页，其中包含一个宽度设置为 100% 的 div 元素，以及一个用于验证其宽度的背景颜色。在我看过的大多数设备（PC、智能手机、平板电脑）上，一切都完全符合预期。但是，我有一台 iPad pro 11"，可以在 Chrome 中以纵向模式正确显示页面：

Portrait mode

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

Landscape mode

我尝试搜索这个问题几个小时，但似乎从来没有遇到任何人与我的确切问题。我遇到了许多答案，说要对 标签进行各种更改，所有这些我都试图无济于事。旋转设备几乎不会告诉浏览器视口尺寸发生了变化。我对前端网页设计相当陌生，对移动设备的响应式设计也很陌生，但看起来像宽度为 100% 的内联样式这样简单的东西就足以满足我的需求了。

谁能提供一些指导？

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

Answer 1

我总是让 HTML 正文占据整个页面，而孩子们可以负责任地表现，我的诀窍是：

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

那么body里面的子div可以是：

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

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

提示：尝试重温 CSS3 的 Flex 和 Grid 模型，这是当今的常态，可以让您实现灵活的布局。