एंड्रॉइड वेबव्यू और सीएसएस मीडिया प्रश्न

Question

मेरे पास एक मूल वेब पेज है जो एंड्रॉइड टैबलेट (नेक्सस 7) पर क्रोम में प्रदर्शित होने पर स्क्रीन आकार और अभिविन्यास परिवर्तन (सीएसएस मीडिया प्रश्नों का उपयोग करके) सही ढंग से प्रतिक्रिया देता है। जब मैं एक वेब पेज में एक ही पृष्ठ प्रदर्शित करता हूं, तो स्क्रीन चौड़ाई के आधार पर मीडिया प्रश्न काम नहीं करते हैं। यहाँ कैसे मैं 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"); 

WebView सही ढंग से उन्मुखीकरण परिवर्तन, निम्नलिखित मीडिया प्रश्नों के व्यवहार के आधार पर पता लगाता है:

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

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

मीडिया स्क्रीन आयामों का उपयोग सही ढंग से काम नहीं करते प्रश्नों क्योंकि, निम्न JavaScript के अनुसार, स्क्रीन चौड़ाई और ऊंचाई निरंतर उन्मुखीकरण परिवर्तन के माध्यम से रहते हैं:

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

मैं पिछले सह गति प्रदान एक "अभिविन्यास" घटना के साथ डी। एंड्रॉइड पर क्रोम में चलते समय, चौड़ाई और ऊंचाई मान सही ढंग से प्रदर्शित होते हैं, डिवाइस अभिविन्यास को खाते में लेते हैं। वेबव्यू के अंदर चलते समय, अभिविन्यास के बावजूद चौड़ाई और ऊंचाई स्थिर रहती है।

क्या कुछ कॉन्फ़िगरेशन मुझे अपेक्षित व्यवहार प्राप्त करने के लिए WebView पर लागू करने की आवश्यकता है?

Answer 1

जब आधुनिक स्क्रीन की बात आती है तो आपको पिक्सेल अनुपात निर्दिष्ट करने की आवश्यकता होती है। सीएसएस शब्दों में एक पिक्सेल एक माप है, वास्तविक पिक्सेल नहीं। उच्च रेज स्क्रीन और रेटिना डिस्प्ले के बाद से पिक्सेल आकार भिन्न होते हैं। निर्माता एक आकार के रूप में पिक्सेल के आधार पर कोशिश करते हैं और प्रदर्शित करते हैं लेकिन यह मीडिया प्रश्नों के साथ ठीक से काम नहीं करता है। आप इस तरह मीडिया क्वेरी करने की जरूरत है:

@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

अपने जावास्क्रिप्ट में window.innerWidth & window.innerHeight में देखने का प्रयास।

Answer 3

आपको अपना एचटीएमएल लोड करने के बाद वेबव्यू सामग्री की चौड़ाई और ऊंचाई की आवश्यकता है (स्क्रीन बदलने के बाद, या कोई बदलाव)। हाँ आप करते हैं, लेकिन getContentWidth विधि (केवल एक दृश्य पोर्ट मान), और getContentHeight() गलत है!

उत्तर: उप-वर्ग 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 
//=========