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

Question

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

人像模式

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

横向模式

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

任何人都可以提供一些指导吗？

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

标签： htmlcssiosipadresponsive-design

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 模型，这是当今的常态，它将允许您实现灵活的布局。