I am doing a very simple website, it's a private admin panel, it's also responsive and built around HTML5.
The login page has the standard Username and Password form fields that I have styled to appear just the way I want. I have tested this page in all 5 of the major browsers on my Windows 7 Ultimate PC (even though Safari for Windows is no more I still tested with the older version I have) and the page looks fine.
So then I grab my iPhone 4S and check the page...and the two input fields and their labels are not where I want them, rather it appears that it's just the Password label and input field. It's off in either rotation of the phone.
I have been scouring the internet for hours and am out of ideas how to reword my search query to get something of use. I have had no luck, so I copied the relevant bits of the site and made a sample website that can be found HERE.
If you resize the browser window, the inputs and labels stay where I want them. Only when viewed on the iPhone do they move from where I want them.
The page on which I'm having the problem has a center div that is only 300px wide, due to the fact there is so little on this page and thus no real need for the responsive action. The pages within the site will need responsive treatment, however. I mentioned responsive at the beginning of this post to be thorough. If I remove the viewport meta tag, the form fields are still out of whack, so there has to be something buggy with the iPhone version of Safari, right?
Any, and I mean ANY help will be supremely appreciated. I'm stonewalled.