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

Question

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.

Unharness

can you share output generated from Galaxy Tab2? – Risner

try this and check settings.setSupportMultipleWindows(true); – Risner

added Screenshot of galaxy tab2 – Unharness

@Robinhood: already tried but no luck – Unharness

If webpage is created by your side then I suggest better to use webserivce instead of webpage, pass all needed data via webserivce, display map & other content in layout. – Rooky

@capDroid : Thnks for your support. but i am not allow to change the Source code from our side. also webservice are the option but actually it has been implemented in iphone 3 years ago. so i have to manage from there Scenario only.i am not change a single code in webpage. – Unharness

Still Waiting for Answer – Unharness

Can you post, or give a pointer to, the html of the page of which you want to present the top left corner? – Bemuse

@emrys57: Sorry but i can not do that. – Unharness

Answer 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();
        }

Whereabouts

Answer 2

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.

Kos

Thnks for your support. but i am not allow to change the Source code from our side. also webservice are the option but actually it has been implemented in iphone 3 years ago. so i have to manage from there Scenario only.i am not change a single code in webpage. – Unharness

Answer 3

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.

Melanochroi

Answer 4

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.

Trichina

Answer 5

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)

Lavaliere