Android Webview - หน้าเว็บควรพอดีกับหน้าจออุปกรณ์

Question 1

ฉันได้ลองทำสิ่งต่อไปนี้เพื่อให้พอดีกับหน้าเว็บตามขนาดหน้าจอของอุปกรณ์

mWebview.setInitialScale(30);

จากนั้นตั้งค่าวิวพอร์ตข้อมูลเมตา

<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"/>

แต่ไม่มีอะไรทำงานหน้าเว็บไม่ได้รับการแก้ไขตามขนาดหน้าจอของอุปกรณ์

ใครช่วยบอกวิธีรับสิ่งนี้ได้ไหม

Question 2

คุณต้องคำนวณมาตราส่วนที่คุณต้องใช้ด้วยตนเองแทนที่จะตั้งค่าเป็น 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();
}

จากนั้นใช้

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

Question 3

คุณสามารถใช้สิ่งนี้

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

ซึ่งจะแก้ไขขนาดตามขนาดหน้าจอ

Question 4

เพื่อน

ฉันพบข้อมูลนำเข้าและข้อมูลดีๆมากมายจากคุณ แต่วิธีเดียวที่ใช้ได้ผลสำหรับฉันคือวิธีนี้:

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

ฉันกำลังทำงานบน Android 2.1 เนื่องจากอุปกรณ์ประเภทต่างๆของ บริษัท แต่ฉันแก้ไขปัญหาของฉันโดยใช้ส่วนของข้อมูลจากแต่ละส่วน

ขอบคุณ!

Question 5

การตั้งค่าเหล่านี้ใช้ได้ผลสำหรับฉัน:

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

setInitialScale (1)หายไปในความพยายามของฉัน

แม้ว่าเอกสารบอกว่า0จะขยายทุกอย่างออกถ้าsetUseWideViewPortถูกตั้งค่าเป็นจริงแต่0ไม่ทำงานสำหรับฉันและฉันได้ไปตั้ง1

Question 6

ลองใช้เคล็ดลับ HTML5 นี้

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

และด้วยสิ่งนี้หากเวอร์ชัน Android ของคุณเป็น 2.1 หรือสูงกว่า

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

Question 7

สิ่งที่คุณต้องทำมีเพียง

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

Question 8

สิ่งเหล่านี้ใช้ได้ผลสำหรับฉันและพอดีกับความกว้างของหน้าจอ WebView:

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

ขอบคุณคำแนะนำข้างต้นและWhite line ในมุมมองเว็บ eclipse

Question 9

ฉันมีปัญหาเดียวกันเมื่อใช้รหัสนี้

webview.setWebViewClient(new WebViewClient() {
}

ดังนั้นคุณควรลบออกในโค้ดของคุณ
และอย่าลืมเพิ่ม 3 โหมดด้านล่างสำหรับ webview ของคุณ

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

ซึ่งจะแก้ไขขนาดตามขนาดหน้าจอ

Question 10

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

สิ่งนี้ใช้งานได้ดีสำหรับฉันเนื่องจากขนาดตัวอักษรถูกตั้งค่าให้เล็กมากโดย. setLoadWithOverViewMode และ. setUseWideViewPort

Question 11

ฉันมีวิดีโอในสตริง html และความกว้างของการดูเว็บมีขนาดใหญ่กว่าความกว้างของหน้าจอและสิ่งนี้ใช้ได้ผลสำหรับฉัน

เพิ่มบรรทัดเหล่านี้ในสตริง HTML

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

ผลลัพธ์หลังจากเพิ่มโค้ดด้านบนในสตริง HTML:

<!DOCTYPE html>
<html>

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


</html>

Question 12

คุณต้องใช้ HTML ใน webView ของคุณในกรณีนี้ ฉันแก้ไขสิ่งนี้โดยใช้รหัสต่อไปนี้

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

Question 13

ทำการเปลี่ยนแปลงคำตอบโดย danh32 ตั้งแต่ display.getWidth (); เลิกใช้งานแล้ว

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

จากนั้นใช้

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

Question 14

ดูเหมือนว่าปัญหา XML เปิดเอกสาร XML ที่มี Web-View ของคุณ ลบรหัสช่องว่างที่ด้านบน

จากนั้นในเค้าโครงให้เพิ่ม

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

ใน Web-View ให้เพิ่ม

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

สิ่งนี้ทำให้ Web-View พอดีกับหน้าจออุปกรณ์

Question 15

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

จะใช้งานได้ แต่อย่าลืมลบบางสิ่งเช่น:

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

หากมีอยู่ในไฟล์ html หรือเปลี่ยน user-scalable = ใช่มิฉะนั้นจะไม่

Question 16

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

Question 17

สิ่งนี้จะช่วยในการปรับโปรแกรมจำลองตามหน้าเว็บ:

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

คุณสามารถกำหนดมาตราส่วนเบื้องต้นเป็นเปอร์เซ็นต์ดังที่แสดงด้านบน

Question 18

เมธอด getWidth ของอ็อบเจ็กต์ดิสเพลย์เลิกใช้แล้ว แทนที่ onSizeChanged เพื่อรับขนาดของ WebView เมื่อพร้อมใช้งาน

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

Question 19

ในทางทฤษฎีการรวมกันของ:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);

ด้วย

settings.setUseWideViewPort(false)

แก้ไขปัญหาห่อเนื้อหาและปรับให้พอดีกับหน้าจอ แต่NARROW_COLUMNSเลิกใช้แล้ว ฉันแนะนำให้คุณอ่านหัวข้อนี้ด้านล่างเพื่อสำรวจปัญหาโดยละเอียด: https://code.google.com/p/android/issues/detail?id=62378

Question 20

นี่คือเวอร์ชันที่อัปเดตโดยไม่ใช้วิธีการเลิกใช้ตามคำตอบของ @ 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;
    }
}

ที่จะใช้เหมือนกัน:

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

Question 21

สำหรับการอ้างอิงนี่คือการนำ Kotlin ไปใช้กับโซลูชันของ @ 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()
}

ในกรณีของฉันความกว้างถูกกำหนดโดยสามภาพเป็น 300 พิกเซลดังนั้น:

webview.setInitialScale(getWebviewScale(300))

ฉันใช้เวลาหลายชั่วโมงในการค้นหาโพสต์นี้ ขอบคุณ!

Question 22

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