androidandroid-layoutandroid-activitywebviewandroid-websettings

Android webview content sometimes not fit the width


In my application ,

first I have some html code as string , then I load it into the webview like this:

WebView content = (WebView) rootView.findViewById(R.id.content);

StringBuilder sb = new StringBuilder();
        sb.append("<HTML><HEAD><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'></HEAD><body>");
        sb.append(pageItem.page_content_chi.toString());
        sb.append("</body></HTML>");

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            content.getSettings().setAllowUniversalAccessFromFileURLs(true);
            content.getSettings().setAllowFileAccessFromFileURLs(true);
        }

        content.setWebChromeClient(new WebChromeClient());
        content.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(intent);
                return true;
            }
        });

        content.getSettings().setUseWideViewPort(true);
        content.getSettings().setJavaScriptEnabled(true);
        content.getSettings().setLoadWithOverviewMode(true);
        content.getSettings().setAppCacheMaxSize(1024 * 1024 * 8);
        String cachePath = ctx.getCacheDir().getAbsolutePath();
        content.getSettings().setAppCachePath(cachePath);
        content.getSettings().setAppCacheEnabled(true);
        content.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

        content.loadDataWithBaseURL("file:///android_asset/",sb.toString(), "text/html", "utf-8", null);
        content.setBackgroundColor(0x00000000);

        content.setOnTouchListener(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                return (event.getAction() == MotionEvent.ACTION_MOVE);
            }
        });

        content.setVerticalScrollBarEnabled(false);
        content.setHorizontalScrollBarEnabled(false); 

Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:overScrollMode="never"
        android:scrollbars="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_margin="5dp"
                android:textSize="25sp"
                android:textStyle="bold" />

            <WebView
                android:id="@+id/content"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

The problem is , the content inside webview sometimes fit to the width , however, it sometimes not fitting and exceed the width. It happen randomly , so when I click on the tab and reload the webview, it sometimes fit the view and sometimes exceed the view. How to fix this? Thanks a lot


Solution

  • Use the WebView Properties as

    <WebView
                    android:id="@+id/content"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" />
    

    After you are done with this the next thing that you have to see is that the website which you are trying to get the content in your webview is responsive or not means that whether its working for all the screens at clear and fine resolution.if not then you must make the webpage Responsive to you that in Webview with as example

    @media (min:320px , max:568px ){ Css Body}