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.
The Problem
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.
The Solution
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" />

In CakePHP I added these Meta Tags to the mobile.ctp layout so it will affect all pages using the mobile layout.
Using these Meta tags fixed the way Android showed the HTML web page – The page looks zoomed-in and fits the screen very nicely:



