Android Webview - Trang web phải vừa với màn hình thiết bị

Tôi đã thử các cách sau để vừa với trang web dựa trên kích thước màn hình thiết bị.

mWebview.setInitialScale(30);

và sau đó đặt chế độ xem siêu dữ liệu

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

Nhưng không có gì hoạt động, trang web không cố định với kích thước màn hình thiết bị.

Bất cứ ai có thể cho tôi biết làm thế nào để có được điều này?

Bạn phải tính toán thang đo mà bạn cần sử dụng theo cách thủ công, thay vì đặt thành 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();
}

Sau đó sử dụng

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

Bạn có thể sử dụng cái này

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

điều này sửa kích thước dựa trên kích thước màn hình.

Bạn bè,

Tôi tìm thấy rất nhiều nhập khẩu và thông tin tuyệt vời từ bạn. Nhưng, cách duy nhất phù hợp với tôi là cách này:

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

Tôi đang làm việc trên Android 2.1 vì loại thiết bị của công ty. Nhưng tôi đã khắc phục sự cố của mình bằng cách sử dụng phần thông tin từ mỗi cái.

Cảm ơn bạn!

Các cài đặt này phù hợp với tôi:

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

setInitialScale (1) bị thiếu trong các lần thử của tôi.

Mặc dù tài liệu nói rằng 0 sẽ thu phóng hết cỡ nếu setUseWideViewPort được đặt thành true nhưng 0 không hoạt động với tôi và tôi phải đặt 1 .

Hãy thử với mẹo HTML5 này

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

Và với điều này nếu Phiên bản Android của bạn là 2.1 trở lên

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

Tất cả những gì bạn cần làm đơn giản là

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

Những điều này phù hợp với tôi và phù hợp với WebView với chiều rộng màn hình:

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

Cảm ơn lời khuyên ở trên và Đường trắng trong chế độ xem Web nhật thực

Tôi gặp vấn đề tương tự khi sử dụng mã này

webview.setWebViewClient(new WebViewClient() {
}

vì vậy có thể bạn nên xóa nó trong mã của mình
Và hãy nhớ thêm 3 chế độ bên dưới cho chế độ xem web của bạn

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

điều này sửa kích thước dựa trên kích thước màn hình

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

Điều này rất hiệu quả đối với tôi vì kích thước văn bản đã được đặt thành thực sự nhỏ bởi .setLoadWithOverViewMode và .setUseWideViewPort.

Tôi có video trong chuỗi html và chiều rộng của chế độ xem web lớn hơn chiều rộng màn hình đó và điều này đang hoạt động đối với tôi.

Thêm các dòng này vào chuỗi HTML.

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

Kết quả sau khi thêm đoạn mã trên vào chuỗi HTML:

<!DOCTYPE html>
<html>

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


</html>

Bạn phải sử dụng HTML trong webView của mình trong trường hợp này. Tôi đã giải quyết vấn đề này bằng cách sử dụng mã sau

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

Thực hiện thay đổi câu trả lời bởi danh32 kể từ khi hiển thị.getWidth (); hiện không được dùng nữa.

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

Sau đó sử dụng

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

Đây có vẻ như là một vấn đề về XML. Mở tài liệu XML có chứa Web-View của bạn. Xóa mã đệm ở trên cùng.

Sau đó, trong bố cục, thêm

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

Trong Web-View, thêm

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

Điều này làm cho Web-View vừa với màn hình thiết bị.

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

sẽ hoạt động, nhưng hãy nhớ xóa một số thứ như:

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

nếu tồn tại trong tệp html hoặc thay đổi user-scalable = yes, nếu không thì không.

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

Điều này sẽ giúp điều chỉnh trình giả lập theo trang web:

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

Bạn có thể đặt tỷ lệ nguyên theo tỷ lệ phần trăm như được hiển thị ở trên.

Phương thức getWidth của đối tượng Display không được dùng nữa. Ghi đè onSizeChanged để có kích thước của WebView khi nó khả dụng.

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

Về lý thuyết, sự kết hợp của:

settings.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS); 

với

settings.setUseWideViewPort(false)

khắc phục sự cố, gói nội dung và vừa với màn hình. Nhưng NARROW_COLUMNS đã không được dùng nữa. Tôi khuyên bạn nên đọc chuỗi này bên dưới để khám phá vấn đề một cách chi tiết: https://code.google.com/p/android/issues/detail?id=62378

đây là phiên bản cập nhật, không sử dụng các phương pháp không được dùng nữa, dựa trên câu trả lời của @ 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;
    }
}

được sử dụng như nhau:

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

Để tham khảo, đây là cách triển khai Kotlin của giải pháp @ 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()
}

Trong trường hợp của tôi, chiều rộng được xác định bởi ba hình ảnh là 300 pix nên:

webview.setInitialScale(getWebviewScale(300))

Tôi đã mất hàng giờ để tìm thấy bài viết này. Cảm ơn!

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