I have embarked on creating a basic website, designed as a private admin panel with responsive features and built using HTML5.
The login page showcases the customary Username and Password form fields that I meticulously styled to meet my precise vision. Upon testing this page across all 5 of the major browsers on my Windows 7 Ultimate PC (even including an older version of Safari for Windows), it displayed flawlessly.
However, when viewing the page on my iPhone 4S, I noticed that the positioning of the two input fields and their respective labels was not as intended. Specifically, it seemed to be affecting just the Password label and input field placement, especially when the phone was rotated.
Despite hours spent scouring the internet for solutions, I've hit a dead end in finding relevant advice. Frustrated by this setback, I decided to extract pertinent segments of the site and create a sample website accessible HERE.
When resizing the browser window, the inputs and labels remain in the desired positions. It's only on the iPhone that they seem to shift from their intended layout.
UPDATE
The problematic page features a center div width restricted to 300px, given its minimal content which eliminates the necessity for responsiveness. However, future pages within the site will require such treatment. Though I initially mentioned the responsive nature of the design at the start of this post for context. Even removing the viewport meta tag fails to rectify the misaligned form fields, leading me to suspect a potential bug in the iPhone version of Safari.
Any assistance, no matter how small, would be greatly appreciated as I find myself unable to progress past this roadblock.
Thank you!