我正在开发我的网站的移动版本，但在旋转我的设备 (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">
我已经彻底查看了 StackOverflow 的解决方案，但其他帖子中的解决方案都不起作用，无论是更改元视口属性、使用 javascript 还是更改 CSS 中的媒体查询。任何帮助将非常感激。