How to show Certain Part of WebPage inside Webview With Fit Screen to All Devices

问题

I Want to Show WebPage Inside WebView. Up to this it is fine.

But I have WebPage (As Given Below) and I want Certain Part of it. I mean just Top Left Corner should be visible in fit to screen mode in all the devices.

I'm resolving this Problem since last two three days.

What I want : I want to Show Top Left Corner of webpage to show inside Webview by Whatever the Stratergy May be with zoom or any other Option but it Should be fit to screen for all the device.

One More thing I can't change the Source Code of Webpage, because it is fixed. I have to manage by code itself.

What I have Tried : I have refer Stackoverflow links but no luck.

Here is my Code. :

            WebView wv;
        wv = (WebView) findViewById(R.id.webview_MyPoops);
        wv.getSettings().setJavaScriptEnabled(true);

        // wv.setInitialScale(185);

        // wv.setInitialScale(30);
        String URL = "MY_LINK";

        wv.loadUrl(URL);

        WebSettings webSettings = wv.getSettings();
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(true);
        webSettings.setLoadWithOverviewMode(true);
        webSettings.setUseWideViewPort(true);

I'm getting complete webpage shown in devices.

It Works fine in My LG Device(Which has Resolution of 480*800) but in big device or tabs like Galaxy Tab2, I'm getting very small image of Top Left Corner and all other Area of screen are just background of WebPage.

Below is the screenshot of Galaxy Tab2 after Running the above code.

Please have you Any suggestion where I am lacking. Thanks in Advance.

回答1:

try with this code hop this work for u.

webview.setInitialScale(getScale()); 



private int getScale(){
            Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
            int width = display.getWidth(); 
            Double val = new Double(width)/new Double(200);
            Log.e("hh", "** "+val);
            val = val * 100d;
            Log.e("hh", "** "+val);
            return val.intValue();
        }

回答2:

WebView x;

x.setInitialScale(1);

This is the furtheset zoom possible. But for some sites it just looks pure UGLY.

This was the second version I found

test1.getSettings().setDefaultZoom(ZoomDensity.FAR);

Thats a nice all rounder than seems to just zoom out far enough for a lot but still not what I was looking for.

And now here is the final solution I have.

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

Basically what these do is answered in another question like this.

setLoadWithOverviewMode(true) 

Loads the WebView completely zoomed out

setUseWideViewPort(true)

回答3:

You could try using HtmlCleaner (examples of how to use it here) to get the html from the webpage, then extract the part you want to display and load it into the WebView using: WebView.loadData();.

I used this method in one of my apps to reformat a page so that it would be easier to use on a mobile device.

回答4:

On the HTML page you can have something like target-densitydpi=240; depending on device type just set this parameter from your Java code, the page will automatically fit to target density.

回答5:

I believe the fix should be done only at the web page level and ideally WebView cannot do any tricks here. WebView is simply a browser(to be specific chromium browser) which should just do rendering as instructed by the web page.

In order to actually fix your issue, you should try modifying the CSS of the web page.

来源：https://stackoverflow.com/questions/13507281/how-to-show-certain-part-of-webpage-inside-webview-with-fit-screen-to-all-device