Okay, I'm at my wits end. Signed up for account here cause need help, big time.
In css, I can use the @media screen and device-aspect-ratio to properly format a horizontal form on a page for desktop, print, droid, horizontal, vertical. We all know how to do that right? It all works great!
Then along comes the iPhone. The device-aspect-ratio doesn't properly differentiate between the iphone and a larger computer screen. I have to use the simple aspect-ratio, or some other property.
Here's the problem. The @media chooses either the page or the form. If the user is looking at the page, then it's formatted for the page. As soon as the user clicks on the first field in the form, then it's formatted for the form.
Thus, if the page is vertical, and the form is horizontal, then the device-aspect-ratio isn't fooled. But the aspect-ratio is fooled.
Here's the problem with using only aspect-ratio. On pages with a form, when the user clicks the form, the simple aspect-ratio zooms in on the form. So .... if the page is vertical, and the form is horizontal, then the page blows up.
Here's the problem with using device-aspect-ratio. On iphones, in a vertical orientation, the page isn't properly formatted for an iPhone.
How can I format the form and the page both for the iPhone, without blowing up the page when the user clicks on the form?
I don't want to use java script.
I want to keep the css as clean as possible.