Question

我正在开发我的网站的移动版本，但在旋转我的设备（iPhone）时遇到了一些奇怪的行为。旋转到横向时，它看起来很好，但是当旋转回纵向时，虽然内容会调整，但视口仍然会停留在横向尺寸上。我有两个登录输入字段，在页面上设置为100％宽度，以便它们能够在旋转时伸展以适应宽度：

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

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

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

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

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

Answer 1

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

请参阅我在下面创建的小提琴（当然在iPhone上）并告诉我它是否有效！