旋转回纵向时视口缩放中断

Posted 2023-03-06

【中文标题】旋转回纵向时视口缩放中断

【英文标题】：Viewport scaling is breaking when rotated back to portrait

【发布时间】：2013-04-12 23:22:40

【问题描述】：

我正在开发我的网站的移动版本，但在旋转我的设备 (iPhone) 时遇到了一些奇怪的行为。旋转到横向时它看起来和工作正常，但是当旋转回纵向时，尽管内容进行了调整，但视口仍停留在横向大小。我有两个登录输入字段，它们在页面上设置为 100% 宽度，以便它们能够拉伸以适应旋转宽度：

input 
    clear: both;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 10px;

这些输入元素似乎是问题的一部分，因为当我将它们更改为自动时，旋转行为正常。有谁知道我可以如何解决这种行为，以及保持表单字段的流体宽度不变？

仅供参考，视口设置如下，以实现固定的缩放设计：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我已经彻底查看了 *** 的解决方案，但其他帖子中的解决方案都不起作用，无论是更改元视口属性、使用 javascript 还是更改 CSS 中的媒体查询。任何帮助将非常感激。

【参考方案1】：

将输入包含在父 div 中，并为父 div 创建 overflow: hidden; 的 CSS 规则。

查看我在下面创建的小提琴（当然是在 iPhone 上），如果它有效，请告诉我！

http://jsfiddle.net/g54pm/3/