Android Webview - Halaman web harus sesuai dengan layar perangkat

Saya telah mencoba yang berikut untuk menyesuaikan halaman web berdasarkan ukuran layar perangkat.

mWebview.setInitialScale(30);

lalu setel area pandang metadata

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
<meta name="viewport" content="width=device-width, target-densityDpi=medium-dpi"/>

Tetapi tidak ada yang berfungsi, halaman web tidak ditetapkan ke ukuran layar perangkat.

Adakah yang bisa memberi tahu saya cara mendapatkan ini?

Anda harus menghitung skala yang perlu Anda gunakan secara manual, daripada menyetel ke 30.

private int getScale(){
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    int width = display.getWidth(); 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

Kemudian gunakan

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

Anda bisa menggunakan ini

    WebView browser = (WebView) findViewById(R.id.webview);
    browser.getSettings().setLoadWithOverviewMode(true);
    browser.getSettings().setUseWideViewPort(true);

ini memperbaiki ukuran berdasarkan ukuran layar.

Teman,

Saya menemukan banyak informasi penting dan impor dari Anda. Tapi, satu-satunya cara berhasil bagi saya adalah dengan cara ini:

webView = (WebView) findViewById(R.id.noticiasWebView);
webView.setInitialScale(1);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setScrollbarFadingEnabled(false);
webView.loadUrl("http://www.resource.com.br/");

Saya mengerjakan Android 2.1 karena jenis perangkat dari perusahaan. Tapi saya memperbaiki masalah saya menggunakan bagian informasi dari masing-masing.

Terimakasih!

Pengaturan ini berfungsi untuk saya:

wv.setInitialScale(1);
wv.getSettings().setLoadWithOverviewMode(true);
wv.getSettings().setUseWideViewPort(true);
wv.getSettings().setJavaScriptEnabled(true);

setInitialScale (1) hilang dalam percobaan saya.

Meskipun dokumentasi mengatakan bahwa 0 akan memperbesar sepenuhnya jika setUseWideViewPort disetel ke true tetapi 0 tidak berfungsi untuk saya dan saya harus menyetel 1 .

Coba dengan tip HTML5 ini

http://www.html5rocks.com/en/mobile/mobifying.html

Dan dengan ini jika Versi Android Anda 2.1 atau lebih tinggi

  WebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Yang perlu Anda lakukan hanyalah

webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);

Ini berfungsi untuk saya dan menyesuaikan WebView dengan lebar layar:

// get from xml, with all size set "fill_parent"  
webView = (WebView) findViewById(R.id.webview_in_layout);  
// fit the width of screen
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 
// remove a weird white line on the right size
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);  

Terima kasih atas saran dan garis putih di tampilan Web gerhana

Saya memiliki masalah yang sama ketika saya menggunakan kode ini

webview.setWebViewClient(new WebViewClient() {
}

jadi mungkin Anda harus menghapusnya di kode Anda
Dan ingat untuk menambahkan 3 mode di bawah ini untuk tampilan web Anda

    webview.getSettings().setJavaScriptEnabled(true);  
    webview.getSettings().setLoadWithOverviewMode(true);
    webview.getSettings().setUseWideViewPort(true);

ini memperbaiki ukuran berdasarkan ukuran layar

WebView browser = (WebView) findViewById(R.id.webview);
browser.getSettings().setLoadWithOverviewMode(true);
browser.getSettings().setUseWideViewPort(true);
browser.getSettings().setMinimumFontSize(40);

Ini berfungsi dengan baik untuk saya karena ukuran teks telah disetel menjadi sangat kecil oleh .setLoadWithOverViewMode dan .setUseWideViewPort.

Saya memiliki video dalam string html, dan lebar tampilan web lebih besar dari lebar layar dan ini berfungsi untuk saya.

Tambahkan baris ini ke string HTML.

<head>
<meta name="viewport" content="width=device-width">
</head>

Hasil setelah menambahkan kode di atas ke string HTML:

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width">
</head>


</html>

Anda harus menggunakan HTML di webView Anda dalam kasus ini. Saya menyelesaikan ini menggunakan kode berikut

webView.loadDataWithBaseURL(null,
                "<!DOCTYPE html><html><body style = \"text-align:center\"><img src= "
                        + \"http://www.koenvangorp.be/photos/2005_09_16-moon_2000.jpg\"
                        + " alt=\"pageNo\" width=\"100%\"></body></html>",
                "text/html", "UTF-8", null);

Membuat Perubahan pada jawaban oleh danh32 sejak display.getWidth (); sekarang tidak digunakan lagi.

private int getScale(){
    Point p = new Point();
    Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay(); 
    display.getSize(p);
    int width = p.x; 
    Double val = new Double(width)/new Double(PIC_WIDTH);
    val = val * 100d;
    return val.intValue();
}

Kemudian gunakan

WebView web = new WebView(this);
web.setPadding(0, 0, 0, 0);
web.setInitialScale(getScale());

Sepertinya ini masalah XML. Buka dokumen XML yang berisi Web-View Anda. Hapus kode padding di bagian atas.

Kemudian di tata letak, tambahkan

android:layout_width="fill_parent"
android:layout_height="fill_parent"

Di Tampilan Web, tambahkan

android:layout_width="fill_parent"
android:layout_height="fill_parent" 

Ini membuat Tampilan Web sesuai dengan layar perangkat.

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

akan berfungsi, tetapi ingat untuk menghapus sesuatu seperti:

<meta name="viewport" content="user-scalable=no"/>

jika ada di file html atau ubah user-scalable = yes, jika tidak maka tidak akan.

int PIC_WIDTH= webView.getRight()-webView.getLeft();

Ini akan membantu dalam menyesuaikan emulator sesuai dengan halaman web:

WebView wb;
//CALL THIS METHOD
wb.setInitialScale(50);

Anda dapat mengatur skala awal dalam persentase seperti yang ditunjukkan di atas.

Metode getWidth dari objek Display tidak digunakan lagi. Ganti onSizeChanged untuk mendapatkan ukuran WebView saat tersedia.

WebView webView = new WebView(context) {

    @Override
    protected void onSizeChanged(int w, int h, int ow, int oh) {

        // if width is zero, this method will be called again
        if (w != 0) {

            Double scale = Double.valueOf(w) / Double.valueOf(WEB_PAGE_WIDTH);

            scale *= 100d;

            setInitialScale(scale.intValue());
        }

        super.onSizeChanged(w, h, ow, oh);
    }
};

Secara teori kombinasi dari:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

dengan

settings.setUseWideViewPort(false)

memperbaiki masalah, membungkus konten dan menyesuaikan dengan layar. Tetapi NARROW_COLUMNS sudah tidak digunakan lagi. Saya menyarankan Anda untuk membaca utas di bawah ini yang mengeksplorasi masalah ini secara mendetail: https://code.google.com/p/android/issues/detail?id=62378

berikut adalah versi yang diperbarui, tidak menggunakan metode yang tidak digunakan lagi, berdasarkan jawaban @ danh32:

protected int getScale(Double contentWidth) {
    if(this.getActivity() != null) {
        DisplayMetrics displaymetrics = new DisplayMetrics();
        this.getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        Double val = displaymetrics.widthPixels / contentWidth * 100d;
        return val.intValue();
    } else {
        return 100;
    }
}

untuk digunakan sama:

int initialScale = this.getScale(420d);
this.mWebView.setInitialScale(initialScale);

Sebagai referensi, berikut adalah implementasi Kotlin dari solusi @ danh32:

private fun getWebviewScale (contentWidth : Int) : Int {
    val dm = DisplayMetrics()
    windowManager.defaultDisplay.getRealMetrics(dm)
    val pixWidth = dm.widthPixels;
    return (pixWidth.toFloat()/contentWidth.toFloat() * 100F)
             .toInt()
}

Dalam kasus saya, lebar ditentukan oleh tiga gambar menjadi 300 piksel jadi:

webview.setInitialScale(getWebviewScale(300))

Butuh waktu berjam-jam untuk menemukan postingan ini. Terima kasih!

WebView webView = (WebView)findViewById(R.id.web_view);
webView.setInitialScale((int) getResources().getDimension(R.dimen._50sdp)); // getActivity(). if you are at Fragment
webView.getSettings().setLoadsImagesAutomatically(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
webView.loadDataWithBaseURL(null,here comes html content,"text/html","UTF-8", null);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDisplayZoomControls(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);