While developing a mobile version of my website, I have encountered an issue with the behavior when rotating my iPhone device. Everything looks fine in landscape orientation, but upon rotation back to portrait, the viewport remains stuck at the landscape size even though the content adjusts accordingly. On the page, I have two login input fields set to 100% width to stretch and fit on rotation:
input {
clear: both;
box-sizing: border-box;
width: 100%;
padding: 18px 10px;
}
It appears that these input elements are contributing to the problem because changing them to auto results in proper rotation behavior. Is there a solution to fix this issue while maintaining the fluid width of the form fields?
For your information, the viewport is configured as follows to support a fixed, scaled design:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have extensively searched on StackOverflow for a resolution, trying various suggestions such as modifying the meta viewport attributes, utilizing JavaScript, or adjusting CSS media queries. Unfortunately, none of these solutions seem to work. Any assistance on this matter would be greatly appreciated.