How To Fit Web Page To Webview's Width When Webview Resizes (without Reloading)

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 re

Solution 1:

do following settings

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

Solution 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.

Solution 3:

You need not change anything on Webview , all u need is Responsive Html Page, If you are designer then that will solve ur issue or u can post a part of ur Question with UI tag.

To built Responsive html pages u can visit : HERE

Result : You need to test on webview while creating your responsive html page, default brower of android itself reflect that ur html page is responsive or not.Once it will work in default brower in Android device then it will work in any webview in android.

Testing : you can test ur responsive html page HERE

Solution 4:

I would have to see the source of your HTML and CSS. You have to exclusively use % sizes and never use fixed width px sizes. Then, the user can change the size of the browser and it will dynamically resize. I also use % widths because of this. It also dynamically resizes if you use CTRL-MouseWheel (zoom).

Solution 5:

Here's a tip for responsive web design, use positions instead of widths:

For example:

html

<divid="somediv">I'm just a div, just a regular div.</div>

css

#somediv {
left: 0; /*numeric value in pixels you would like this div to be from the left */right: 0; /*same as above, except on the right */height: 50px;
width: auto;
}

The div above will automatically resize based on screen width.