Truy vấn phương tiện truyền thông WebView và CSS của Android

Question

Tôi có trang web cơ bản phản hồi chính xác các thay đổi về kích thước và hướng màn hình (sử dụng truy vấn phương tiện CSS) khi được hiển thị trong Chrome trên máy tính bảng Android (Nexus 7). Khi tôi hiển thị cùng một trang trong một WebView, các truy vấn phương tiện truyền thông dựa trên chiều rộng màn hình không hoạt động. Đây là cách tôi đang thiết lập các WebView:

WebView webView = (WebView) findViewById(R.id.webView); 
webView.getSettings().setJavaScriptEnabled(true); 
webView.getSettings().setLoadWithOverviewMode(true); 
webView.getSettings().setUseWideViewPort(true); 
webView.loadUrl("http://10.0.1.8:8080/cbc/test"); 

Các WebView phát hiện một cách chính xác những thay đổi định hướng, dựa trên hành vi của các truy vấn phương tiện truyền thông sau:

@media only screen and (orientation: portrait) { 
    .landscape { display: none; } 
} 

@media only screen and (orientation: landscape) { 
    .portrait { display: none; } 
} 

Truyền thông truy vấn sử dụng kích thước màn hình không hoạt động chính xác , bởi vì, theo JavaScript sau đây, chiều rộng và chiều cao của màn hình vẫn không đổi thông qua các thay đổi định hướng:

$("#dimensions").empty(); 
    $("#dimensions").append($("<div>Width: " + screen.width + "</div>")); 
    $("#dimensions").append($("<div>Height: " + screen.height + "</div>")); 
    $("#dimensions").append($("<div>Depth: " + screen.pixelDepth + "</div>")); 

Tôi kích hoạt đồng trước đó de với một sự kiện "orientationchange". Khi chạy trong Chrome trên Android, giá trị chiều rộng và chiều cao được hiển thị chính xác, tính đến hướng thiết bị. Khi chạy bên trong WebView, chiều rộng và chiều cao vẫn không đổi, bất kể định hướng.

Có một số cấu hình tôi cần áp dụng cho WebView để có được hành vi mong muốn không?

Answer 1

Khi nói đến màn hình hiện đại, bạn cần chỉ định tỷ lệ pixel. Một pixel trong thuật ngữ CSS là phép đo chứ không phải là pixel thực tế. Kích thước pixel khác nhau kể từ màn hình có độ phân giải cao và màn hình hiển thị võng mạc. Các nhà sản xuất thử và hiển thị dựa trên pixel dưới dạng kích thước nhưng nó không hoạt động với các truy vấn phương tiện một cách chính xác. Bạn cần phải làm các truy vấn phương tiện truyền thông như thế này:

@media 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and ( min--moz-device-pixel-ratio: 2), 
    only screen and ( -o-min-device-pixel-ratio: 2/1) { 
     //CSS here 
} 

Answer 2

Cố gắng nhìn vào window.innerWidth & window.innerHeight trong javascript của bạn.

Answer 3

Bạn cần chiều rộng và chiều cao của NỘI DUNG WebView, sau khi bạn tải HTML (sau khi thay đổi màn hình hoặc bất kỳ thay đổi nào). CÓ, nhưng không có phương thức getContentWidth (chỉ giá trị cổng xem), VÀ getContentHeight() không chính xác!

Trả lời: sub-class WebView:

/* 
    Jon Goodwin 
*/ 
package com.example.html2pdf;//your package 

import android.content.Context; 
import android.util.AttributeSet; 
import android.webkit.WebView; 

class CustomWebView extends WebView 
{ 
    public int rawContentWidth = 0;       //unneeded 
    public int rawContentHeight = 0;       //unneeded 
    Context mContext   = null;      //unneeded 

    public CustomWebView(Context context)      //unused constructor 
    { 
     super(context); 
     mContext = this.getContext(); 
    } 

    public CustomWebView(Context context, AttributeSet attrs) //inflate constructor 
    { 
     super(context,attrs); 
     mContext = context; 
    } 

    public int getContentWidth() 
    { 
     int ret = super.computeHorizontalScrollRange();//working after load of page 
     rawContentWidth = ret; 
     return ret; 
    } 

    public int getContentHeight() 
    { 
     int ret = super.computeVerticalScrollRange(); //working after load of page 
     rawContentHeight = ret; 
     return ret; 
    } 
//========= 
}//class 
//=========