Android Webview - Halaman web harus sesuai dengan layar perangkat


103

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?

Jawaban:


82

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

7
Terima kasih atas balasan Anda, benar, berhasil. tetapi saya memiliki masalah yang berbeda. Saya tidak memuat gambar, memuat halaman web di tampilan web, Jadi bagaimana mengetahui lebar halaman web (PIC_WIDTH).
SWDeveloper

1
Ah, saya merindukan konstanta itu di sana. Maaf soal itu. Saya tidak yakin bagaimana Anda bisa mendapatkan lebar halaman web yang sebenarnya.
danh32

54
Apa PIC_WIDTH di sini?
Paresh Mayani

4
PIC_WIDTH adalah konstanta yang saya ketahui sebelumnya, karena saya hanya menampilkan satu gambar dari folder aset. Seperti yang saya katakan di atas, saya tidak tahu bagaimana Anda bisa mendapatkan lebar halaman web yang sebenarnya.
danh32

1
@MaheshwarLigade saya menggunakan PIC_WIDTH = 360
Nicholas Ng

292

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.


4
Ini kaki layar tetapi tidak memungkinkan Anda untuk melakukan zoom in / out lagi. Bisakah masalah ini diperbaiki ?, saya tahu ini mungkin terjadi di iOS.
AlexAndro

1
pengaturan ini berfungsi untuk saya tetapi hanya untuk lebarnya, dalam kasus yang sama sekarang ini memotong ketinggian
albanx

1
Ini adalah solusi terbaik untuk mencapai ini yang saya temukan sejauh ini.
fragon

1
Fakta bahwa solusi tersebut dibangun benar-benar membuat saya tertarik.
Daniel Handojo

3
Untuk menambahkan zoom, tambahkan berikut ini: webview.getSettings (). SetBuiltInZoomControls (true); webview.getSettings (). setDisplayZoomControls (false);
Andrew

34

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!


Kemudian zoom tidak berfungsi lagi. Saya satu-satunya dengan masalah ini?
menguji

@ Pengujian apakah Anda mendapatkan solusinya?
Anshul Tyagi

@AnshulTyagi: Tidak, saya tidak. Karena ini adalah proyek uji bagi saya, saya tidak menyelidiki lebih lanjut hal ini. Beri tahu saya jika Anda menemukan sesuatu!
menguji

@AnshulTyagi: Untuk halaman web , pendekatan ini berhasil untuk saya. Untuk gambar saya harus menggunakan sesuatu yang berbeda ...
menguji

31

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 .


1
Saya tidak menetapkan skala awal, dan itu berhasil untuk saya selama bertahun-tahun. (Saya hanya mengatur mode ikhtisar, dan viewport). Tapi perangkat baru yang baru saya temukan sepertinya mulai diperbesar sampai halaman disegarkan. Pengaturan skala awal memperbaiki ini untuk saya.
Doomsknight


15

Yang perlu Anda lakukan hanyalah

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

13

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


3
Tampaknya SINGLE_COLUMN sekarang tidak digunakan lagi developer.android.com/reference/android/webkit/…
Alexander Abramov

11

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


2
@ shahzainali Anda dapat memperbesar tampilan web Anda?
Anshul Tyagi

@AnshulTyagi Tidak itu tidak memperbesar.
shahzain ali

6
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.


6

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>

5

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

saya kira lebih baik menggunakan px ot vh daripada%. % di iframe memiliki beberapa bug pada perubahan orientasi
Siarhei

4

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

Saya menghitung bahwa skalanya harus <1 atau 100% jadi saya membandingkan lebar saya dengan PIC_WIDTH untuk mendapatkan rasio. Lebih dari itu saya juga mengurangi beberapa padding.
Abhinav Saxena

4

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.


itulah yang menghemat waktu saya.
Kabkee

2
fill_parent sudah usang, gunakan match_parent.
Trevor Hart

3
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.


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

1
getRight dan getLeft selalu mengembalikan 0 untuk saya
yrazlik

2

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.


2

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

Bagaimana Anda mendapatkannya WEB_PAGE_WIDTH?
menguji

Jika Anda mencoba menskalakan beberapa konten dengan lebar tetap agar sesuai dengan layar, Anda harus tahu terlebih dahulu seberapa lebar konten Anda. Apakah itu masuk akal?
SharkAlley

Oke, ini seharusnya berfungsi untuk gambar. Tapi untuk halaman web (yang bisa responsif) bisa jadi berapa pun lebarnya> 320px misalnya.
menguji


1

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

0

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!


-4
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);

Harap jangan memposting dua jawaban dengan konten yang sama hanya karena tidak setuju.
techydesigner

Dan tolong format kode Anda dengan sedikit usaha! Mengapa Anda terlalu menjorok ke kanan? Terlalu banyak waktu untuk menghapus beberapa ruang kosong?
Massimiliano Kraus
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.