एंड्रॉइड में WebView को स्क्रीन फिट कैसे करें?

एंड्रॉइड WebView को स्क्रीन में फिट करना

यह उदाहरण दर्शाता है कि WebView कंटेंट को डिवाइस स्क्रीन की चौड़ाई में फिट करने के लिए कौन सी सेटिंग्स उपयोग करें।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में नया प्रोजेक्ट बनाएं।

चरण 2: लेआउट फ़ाइल

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

चरण 3: MainActivity.java

package com.example.myapplication;

import android.app.ProgressDialog;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    @RequiresApi(api = Build.VERSION_CODES.P)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ProgressDialog progressDialog = new ProgressDialog(this);
        progressDialog.setMessage("लोड हो रहा है...");
        progressDialog.setCancelable(false);

        WebView webView = findViewById(R.id.web_view);
        webView.requestFocus();
        webView.getSettings().setLightTouchEnabled(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setGeolocationEnabled(true);
        webView.setSoundEffectsEnabled(true);
        
        // स्क्रीन फिट सेटिंग्स
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        webView.getSettings().setUseWideViewPort(true);    // व्यूपोर्ट वाइड उपयोग करें
        webView.getSettings().setLoadWithOverviewMode(true); // ओवरव्यू मोड में लोड करें
        
        // अतिरिक्त सेटिंग्स बेहतर फिटिंग के लिए
        webView.getSettings().setSupportZoom(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setDisplayZoomControls(false);
        
        webView.loadUrl("https://www.tutorialspoint.com/");

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int progress) {
                if (progress < 100) {
                    progressDialog.show();
                }
                if (progress == 100) {
                    progressDialog.dismiss();
                }
            }
        });
    }
}

चरण 4: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.myapplication">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <activity android:name=".MainActivity">
            <intent-filter>
                
                
            </intent-filter>
        </activity>
    </application>
</manifest>

स्क्रीन फिट के लिए मुख्य सेटिंग्स

LayoutAlgorithm विकल्प

• NORMAL - सामान्य लेआउट
• SINGLE_COLUMN - सिंगल कॉलम में कंटेंट (पुराना)
• TEXT_AUTOSIZING - टेक्स्ट ऑटो-साइज़िंग (API 19+, अनुशंसित)

मेटा व्यूपोर्ट टैग (वेबसाइट साइड)

सर्वोत्तम परिणाम के लिए वेबसाइट में यह मेटा टैग होना चाहिए:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

ऐप चलाएं

ट्यूटोरियलस्पॉइंट मोबाइल व्यू में लोड होगा, स्क्रीन चौड़ाई में फिट होगा।