How to fit web page to webview's width when webview resizes (without reloading)

Question

I have an HTML page and a full-screen Android webview. The HTML content is larger than the webview's visible area. I want to fit the HTML content to the width of webview.

What's really important is this: when the device's orientation changes, the webview will not reload, meaning it will just resize and the content would still fit to width.

One more thing: because the content has been scaled down, user can zoom it in to a maximum scale of 100%. When the content is zoomed and orientation changes, I want the content to fit-width again.

Edit 1: I can change meta tags in the head of HTML, but its content remains larger than the webview's visible area. I'm supporting Android 2.3 and later.

Edit 2: Thanks for the suggestion on responsive web design. I know what it is and I can do it. Problem is I cannot change much of the HTML content in this case.

TL;DR: How to always fit a larger HTML content to a Android webview's width as the webview resizes, without reloading the content. (I can change the webview, not much of the HTML.)

Answer 1

do following settings

    webview.getSettings().setUseWideViewPort(true);
    webview.getSettings().setLoadWithOverviewMode(true);

Answer 2

This may sound like a cop-out answer, but I think it depends on how you're building the rest of your site. Whenever I work on responsive sites, I use:

<meta name="viewport" content="width=device-width, initial-scale=1">

This will do two things: width=device-width will find the width of your device, and send styles from your CSS that match that size (you can set styles for specific sizes in your CSS, using media queries). Initial-scale=1 will make the site show up at 100% when it loads, but still give users the option to zoom in.

If your site is developed for a specific width, you could try using:

<meta name = "viewport" content = "width = 980 (or whatever the width you're designing for)">

This will just scale down your site to fit the device width. Nothing super special here, users will basically just be shown mini-desktop sites.

I'd recommend reading this Webdesign Tuts+ article. They explain the viewport meta tag well, with examples.