iOS6横向到纵向打破了布局

Posted 2023-03-07

【中文标题】iOS6横向到纵向打破了布局

【英文标题】：iOS6 landscape to portrait breaks the layout

【发布时间】：2013-12-05 12:01:15

【问题描述】：

我正在开发一个响应式的网络应用程序。我已将viewport 元标记设置为：

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

除了ios6，我在任何地方的定位都没有问题。在那个特定的iOS 上，当我将方向从横向更改为纵向时，内容会保持正确的纵横比，但部分会向左消失，而在右侧留下空白区域。

当我打开iOS Simulator 的调试器（Safari > Develop > iPhone Simulator > URL）并单击html 标记 - 它没有溢出 - 页面会快速返回到应该是的。

请注意，我依靠viewport 元标记来完成这项工作，而不是使用任何iOS 专有方向模式。它适用于：

iOS5.1.0 在 iOS 模拟器上测试 iOS7.0.0 在真 iPhone 上测试

我们不支持iOS4 也不支持更低版本。有人有同样的经历吗？

【问题讨论】：

这个问题可能闻起来像“过于本地化”，但它也可能是一个记录不充分的 iOS6 错误......：P

【参考方案1】：

我发现这是一个输入字段导致页面从横向更改为纵向时中断。

经过进一步挖掘，我发现placeholder 文本是问题的根本原因。拿走占位符可以解决问题。但由于这是iOS6 独有的问题，我不得不另谋出路……This question 让我找到正确的方向。

我所要做的就是提供输入字段的父元素（在本例中为表单）overflow: hidden。