i am converting a website we did, to mobile as well.
So far, everything is great, after reading a bit about pixel density and all the meta tags, i have put together a great looking website that is really well designed around the mobile screen but i am having just one problem so far.
No matter what i tried, the browser zooms in to a textfield when it has the focus.. This would not normally be a problem, but when it happens, it seems to ignore my media queries css.. I have my galaxy s3 plugged in my desktop chrome to debug the page and i can see that the footer (having display none in my media queries) shows up when zoomed in a textbox. (along with other css changes of course that comes along with ignoring my media queries).
So i am looking for a way to either remove the zoom function (reading up on lots of articles about it here, none worked for mobile chrome and the stock galaxy s3 browser, dont know about iphones or windows yet), or make my stylesheet work when zoomed in. Or even better, additional styles when zoomed in so i can remove everything but the textfield!
My current viewport settings are:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Thanks!
I just solved it. My media query included “and (orientation:portrait)” so to take portait orientation into account but did not specify the same or other styles for landspace. So when the keyboard comes up because of the textfield getting the focus, it essentialy removes available space from the viewport, making it landspace, having the page resort back to the desktop css. So, if you have the same problems, have a look at your code! 🙂