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.

enter image description here

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. enter image description here Please have you Any suggestion where I am lacking. Thanks in Advance.

try this and check `settings.setSupportMultipleWindows(true);` — RobinHood, Nov 22 '12 at 07:32
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. — Niranj Patel, Nov 24 '12 at 07:25
@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. — Bhavesh Patadiya, Nov 24 '12 at 09:42
Can you post, or give a pointer to, the html of the page of which you want to present the top left corner? — emrys57, Nov 30 '12 at 21:06

score 1 · Answer 1 · answered Dec 01 '12 at 07:05

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

score 0 · Answer 2 · answered Nov 25 '12 at 23:08

0

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.

answered Nov 25 '12 at 23:08

x23

113
7

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. – Bhavesh Patadiya Nov 26 '12 at 07:36

score 0 · Answer 3 · edited Jan 11 '13 at 15:33

0

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.

edited Jan 11 '13 at 15:33

praseodym

2,134
15
29

answered Jan 11 '13 at 15:15

Amrut

543
4
8

score 0 · Answer 4 · edited Mar 22 '14 at 04:27

0

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.

edited Mar 22 '14 at 04:27

The Heist

1,444
1
16
32

answered Mar 22 '14 at 03:58

keerthy

236
1
9

score 0 · Answer 5 · edited Nov 06 '14 at 05:01

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)

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

5 Answers5

Linked