Android-- PhoneGap/WebView bỏ qua thẻ meta chế độ xem?

Question

Tôi có một trang web mà tôi đang cố gắng hiển thị trên thiết bị Android của mình (được tải từ thư mục tài sản của dự án) bằng cách sử dụng PhoneGap (sử dụng WebView bình thường được đặt làm "appview"), nhưng webview hoàn toàn bỏ qua những điều sau :

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

Không có vấn đề gì tôi đặt trong dòng này (tôi đã cố gắng một cách rõ ràng thiết lập zoom, thiết lập chiều rộng/chiều cao tính bằng pixel, vv), các thiết bị hoàn toàn bỏ qua nó và làm cho các trang web rất nhỏ và được neo vào góc trên bên trái của màn hình. Tôi có thể phóng to bằng cử chỉ chụm (ngay cả khi tôi vô hiệu hóa thu phóng bằng mã html ở trên), nhưng tôi muốn trang được phóng to để phù hợp với thiết bị khi tải.

Dưới đây là một chút thú vị ... Nếu tôi đặt cùng một trang web trên máy chủ web và điều hướng đến trang web bằng trình duyệt mặc định trên thiết bị thử nghiệm của tôi, trang tải đúng cách (được chia tỷ lệ phù hợp với thiết bị).

Vui lòng trợ giúp.

Cảm ơn.

EDIT1:

thiết lập hiện tại của tôi là:

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> 

Điều đó nữa cũng là hoàn toàn bị bỏ qua.

EDIT2:

Dưới đây là một cái gì đó thú vị ...

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, user-scalable=no" /> 

Dòng trên tỷ lệ trang 2x trong giả lập chưa có gì thay đổi trên thiết bị của tôi (Samsung Epic chạy 2.2.1) . Tuy nhiên, ngay cả ở 2x, trang không được thu nhỏ đến chiều rộng của trình mô phỏng ... Tôi phải đặt nó thành cái gì đó như "ban đầu-scale = 2,5".

Answer 1

tôi sử dụng này trên iphone với PhoneGap

<meta name="description" content="trevorrudolph.com"> 
<meta name="format-detection" content="telephone=no"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<link rel="apple-touch-icon" href="http://trevorrudolph.com/wordpress/apple-touch-icon.png"> 

Answer 2

Hãy thử thêm hai dòng sau trong phương thức onCreate() của lớp Java mà kéo dài DroidGap.

this.appView.getSettings().setUseWideViewPort(true); 
this.appView.getSettings().setLoadWithOverviewMode(true); 

Hãy cho tôi biết nếu thẻ khung nhìn của bạn bây giờ bắt đầu hoạt động.

Answer 3

Tôi đã thử

this.appView.getSettings().setUseWideViewPort(true); 
this.appView.getSettings().setLoadWithOverviewMode(true); 

Phóng to không được kích hoạt.

Với các thiết lập sau đây, zoom kích hoạt

this.appView.getStrings().setSupportZoom(true); 

Nhưng nó không được kiểm soát một cách chính xác bằng thẻ viewport, tất cả các trang đang Zoomable bây giờ thậm chí với mức tối thiểu quy mô = 1 và tối đa quy mô = 1 bộ trong khung nhìn nhãn.

Và điều hướng trang bị lỗi ngay bây giờ, nhấp vào nút trên trang và nút quay lại Android không hoạt động chính xác.

Answer 4

Nếu bạn muốn android để mở rộng nội dung để chiều rộng cố định (1024 trong ví dụ) sử dụng này:

<meta name="viewport" id="viewport" content="width=1024"> 
<script type="text/javascript"> 
    var viewPortWidth = 1024; 
    function setViewport() { 
    if ((navigator.userAgent.toLowerCase().indexOf("android")!=-1)) { 
     var wW0 = window.screen.width; 
     var scale = wW0/viewPortWidth; 
     var vPort = "width="+viewPortWidth+", maximum-scale="+scale+", minimum-scale="+scale+", initial-scale="+scale+", user-scalable=yes"; 
     document.getElementById("viewport").setAttribute("content", vPort); 
    } 
    } 
    setViewport(); 
</script> 

Ngoài ra, bạn nên thêm event listener cho onorientationchange gọi setViewport chức năng.

Answer 5

Có câu trả lời hay ở đây nhưng Cordova API dường như đã thay đổi một chút.

Trong phương pháp OnCreate (sau loadUrl hoặc sau khi bạn gọi init rõ ràng):

CordovaWebViewEngine engine = appView.getEngine(); 
    SystemWebView webView = (SystemWebView)engine.getView(); 
    WebSettings settings = webView.getSettings(); 
    settings.setUseWideViewPort(true); 
    settings.setLoadWithOverviewMode(true);