I just released an Android version of my Cats Idol pet project – it lets you browse through photos of cats submitted by other people, rate the cats, and set the photos as your Android wallpaper.
One of the things I wanted to do was to provide users with the ability to upload photos straight from their phone. I decided that a web interface would be the easiest way to go at it. So, my application has a button called “Add cat” that launches the Android web browser with a URL of my server-side CakePHP-based upload HTML form.
Then I ran in to a problem – The HTML upload page was “zoomed out” on android, seemed like the browser did not scale the HTML properly and you needed a lot of zooming in order to work with it.
I thought this was a problem with my android code but found that it was actually a server-side issue.
After some digging, I found a solution to this issue.
Adding these two Meta Tags in the head Tag of the HTML page solved this issue:
<meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
Using these Meta tags fixed the way Android showed the HTML web page – The page looks zoomed-in and fits the screen very nicely: