In android web view the html page is being treated like it is being opened in a big screen rather in mobile device

Question

I am using a webview in my android app. Now the issue is in that webview it is opening like a desktop site not like a mobile platform site.

As for example, when I open the page in webview it is being shown like

And the same page when I am opening in web browser it looks like;

Now my question is I want to open the page in my web view like it is in web browser and I have no idea why it is behaving like that.

My webview code is like;

    final WebView webview = (WebView)vi.findViewById(R.id.webview);
    WebSettings set = webview.getSettings();
    set.setJavaScriptEnabled(true);
    set.setBuiltInZoomControls(true);
    set.setJavaScriptEnabled(true);
    set.setDomStorageEnabled(true);
    set.setLoadWithOverviewMode(true);
    set.setUseWideViewPort(true);
    set.setSaveFormData(true);
    set.setJavaScriptCanOpenWindowsAutomatically(true);
    set.setBuiltInZoomControls(true);
    set.setDisplayZoomControls(false);
    set.setSupportZoom(false);
    set.setDefaultTextEncodingName("utf-8");


    WebChromeClient webClient = new WebChromeClient(){

        public void onCloseWindow(Window w){
            super.onCloseWindow(webview);
            System.out.println("Closed");
        }
    };
    webview.setWebChromeClient(webClient);

    webview.setWebViewClient(new WebViewClient(){
        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
        {
            // Handle the error
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url)
        {
            view.loadUrl(url);
            return true;
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            dialog.dismiss();
        }

    });

    webview.setInitialScale(1);
    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setLoadWithOverviewMode(true);

    webview.loadUrl(url);

I changed the value of webview.setInitialScale(1); but no luck so far.

I can not change the HTML of the pages, so I need to do some kind of changes in webview end.

NB The attached images of page is same HTML page opening in browser and webview. PLEASE IGNORE THE BACKGROUND COLOR.

Any help will be very good for me. Thanks in advance.

Answer 1

This works for me

public class MainActivity extends AppCompatActivity {
private WebView webView;


@Override
protected void onCreate(Bundle savedInstanceState) {
    getWindow().requestFeature(Window.FEATURE_PROGRESS);

    setContentView(R.layout.activity_main);
    super.onCreate(savedInstanceState);

    initViews();
}


protected void initViews() {
    webView = (WebView) findViewById(R.id.webView);
    if (Build.VERSION.SDK_INT >= 19) {
        webView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
    } else {
        webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setDomStorageEnabled(true);
    webView.getCertificate();
    webView.setWebViewClient(new SSLTolerantWebViewClient());


    webView.loadUrl("https://www.google.com");

}


private class SSLTolerantWebViewClient extends WebViewClient {
    // ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        Log.d("ddd", "ddd");
        return true;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // progressBar.setVisibility(View.GONE);
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        // progressBar.setVisibility(View.VISIBLE);
    }

    @Override
    public void onReceivedSslError(WebView view, final SslErrorHandler handler, SslError error) {
        handler.proceed();
    }
}

}

Answer 2

Is your page responsive ? Try opening page in mobile browser. if it is not responsive make it responsive. Make sure you have added viewport meta tag in html like -