How to Make Web Pages Fit and Scale Nicely on Android Web Browser

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:

Share the love...Tweet about this on TwitterShare on LinkedInShare on Google+Share on Facebook

Amir Shevat

Amir Shevat is the global Startup Outreach lead in Google Developer Relations (g.co/launch). Previously, Amir Led Google Campus Tel Aviv and was the co founder of several startups.

You may also like...

9 Responses

  1. Daniel Bueno says:

    Thank You, I Had the same problem, Where I can get more information about meta tags configuration, available to android?
    Thank You
    Daniel Bueno

  2. Sean says:

    @Daniel – I was just looking for “how to fit webpage to android browser”, and found this page and this one:
    http://developer.android.com/guide/webapps/targeting.html

  3. Petar says:

    God bless you, friend.

  4. Rich says:

    This was perfect. Thank you for this post!!

  5. Nick says:

    thanks. You saved my day!!!

  6. Delbin Thomas says:

    Thank you.. Its really helpful..

  7. ravi says:

    i am also facing same issue ,i tried your suggestion but it is not working.can you please suggest me any solution that will fit the webpage within the device width and height

  8. kurir solo says:

    Thanks for tutorial. It’s very useful for me :)

  1. September 17, 2012

    […] How to Make Web Pages Fit and Scale Nicely on Android Web …How to Make Web Pages Fit and Scale Nicely on Android Web Browser. 2. Posted by Amir Shevat | Posted on 11-03-2011. Category : Android, CakePHP, PHP, … […]

Leave a Reply

Your email address will not be published. Required fields are marked *