एंड्रॉइड ब्राउज़र की स्क्रीन.विड्थ, स्क्रीन.हेइट और विंडो.इनरविड्थ और विंडो.इनरहाइट अविश्वसनीय

Question

मैं एक वेब ऐप पर काम कर रहा हूं जो डेस्कटॉप, टैबलेट और स्मार्टफ़ोन पर ब्राउज़र पर लक्षित है।

वेब ऐप में Colorbox का उपयोग करके iframe के साथ एक लाइट बॉक्स लागू किया गया है। जब ब्राउज़र विंडो का आकार बदलता है या टैबलेट/फोन में इसका अभिविन्यास बदल जाता है, तो जावास्क्रिप्ट कोड विंडो आयामों से पूछताछ करता है ताकि वह प्रकाश बॉक्स के कुछ तत्वों का आकार बदल सके।

मेरे पास यह समस्या यह है कि सब कुछ डेस्कटॉप पर ठीक काम करता है (विंडोज़: आईई, फ़ायरफ़ॉक्स, क्रोम, मैक: सफारी), आईपैड & आईफोन लेकिन एंड्रॉइड स्मार्टफोन (एचटीसी) और एंड्रॉइड एमुलेटर पर नहीं।

एंड्रॉयड हमेशा के लिए screen.width, screen.height, window.innerWidth & window.innerHeight विभिन्न मूल्यों रिटर्न जब वे खिड़की के आकार घटना है, जो कई बार आग अंदर से पूछे जा रहे हैं।

एंड्रॉइड ब्राउजर मूल्यों में इतनी व्यापक भिन्नता क्यों लौटा रहा है और मैं ब्राउज़र विंडो की चौड़ाई और ऊंचाई का विश्वसनीय रूप से पता कैसे लगा सकता हूं?

Answer 1

मुझे वर्कअराउंड खोजने में मुझे घंटे लगे।

window.innerHeight, window.outerheight, आदि के बीच एकमात्र स्थिर screen.height था।

इस कोड को मुझे outerheight दिया:

screen.height/window.devicePixelRatio - window.screenTop 

इसके अलावा, आदेश में एक setTimeout

मुझे आशा है कि यह उपयोगी है में, एंड्रॉयड के पुराने संस्करणों का समर्थन लगाने के लिए अपना कोड में =)

Answer 2

एंड्रॉइड पर, window.outerWidth और window.outerHeight विश्वसनीय रूप से स्क्रीन आकार हैं। एंड्रॉइड के आपके संस्करण के आधार पर, आंतरिक Width/ऊंचाई आमतौर पर गलत है।

स्थिति पर वास्तव में एक अच्छा writeup है।

Answer 3

var throttle = (function() { 
     var timer; 

     return function (fn, delay) { 
      clearTimeout(timer); 
      timer = setTimeout(fn, delay); 
     }; 
    })(), 


    var callback = function (w, h) { 
     alert(w + ' ' + h); 
    } 


    window.onresize = throttle(function() { 
     width = Math.min(window.innerWidth, window.outerWidth); 
     height = Math.min(window.innerHeight, window.outerHeight); 

     callback(width, height); 
    }, 60); 

Answer 4

नीचे सैमसंग टैब चलाने वाले Android 4,1

• screen.height साथ रीडिंग के आधार पर भेदभाव किया जाता है - देता कार्य पट्टी और शीर्षक पट्टी सहित
  
  
• window.innerHeight वास्तविक डिवाइस ऊंचाई - देता है टास्क बार को छोड़कर ऊंचाई, शीर्षक पट्टी और पता बार (यदि दिखाई दे)
  
  
• window.outerHeight - ऊंचाई कार्य पट्टी और शीर्षक बार ऊंचाई को छोड़कर देता है, (कोई बात नहीं पता पट्टी दृश्य या छिपा हुआ है, outerHeight पता पट्टी ऊंचाई शामिल हैं।)

Answer 5

दान के जवाब एंड्रॉयड के ब्राउज़र के बीच inconcistancy तो ठीक .. मैं मोबाइल व्यूपोर्ट का पता लगाने/बदलने के बाद पोस्ट करें और घुमाए जाने पर इसे अनुकूलित करें (पता नहीं है कि किसी के लिए उपयोग योग्य है या नहीं ...

var lastorg=0; //set the begining of script 
thisorg=parseInt(window.innerWidth)/parseInt(window.innerHeight); //for ratio to detact orietation 
if(((lastorg<1 && thisorg>1) ||(lastorg>1 && thisorg<1) ||lastorg==0)){ //is start or change 
$("#viewport").attr('content', 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'); // reset viewport to device 
mywidth = Math.min(window.innerWidth, window.outerWidth); //Dan's way to fix the inconsistancy 
myheight = Math.min(window.innerHeight, window.outerHeight); 
lastorg=thisorg; //update the lastorg 
wr=parseInt(mywidth)/1280; // the minimum desire width 
hr=parseInt(myheight)/630; // the minimum desire height 
if(hr<wr){ 
vscale=hr; 
if(hr<1){ // if it if small screen, so desktop pc wouldn't change 
windowHeight=630; 
windowwidth=mywidth/hr; 
} 
}else{ 
vscale=wr; 
if(wr<1){ 
    windowwidth=1280; 
    windowHeight=myheight/wr; 
} 
} 
$("#viewport").attr('content', 'width=device-width, initial-scale='+vscale+',minimum-scale='+vscale+', maximum-scale='+vscale); //reset viewport toresize window 
if(thisorg>1){ 
    $("#pro").fadeOut(500); 
}else{ 
$("body").prepend("<div id=pro style='position:absolute;width:800px;height:30px;padding:30px;left:"+(windowwidth/2)+"px;top:"+(windowHeight/2)+"px;margin-left:-430px;margin-top:-45px;;border:1px solid #555;background:#ddeeff;text-align:center;z-index:99999;color:#334455;font-size:40px;' class=shadowme>Please rotate your phone/tablet</div>");//tell user to rotate 
} 
} 

Answer 6

इस प्रयास करें, और जाँच अपने मोबाइल पढ़ने

<script> 
var total_height=screen.height*window.devicePixelRatio; 
alert(total_height); 
</script> 

यह अपने फोन विनिर्देशों के स्क्रीन आकार (ऊंचाई) से मेल खाना चाहिए।

Answer 7

मैं इसे आईओएस और एंड्रॉइड के बीच काम करने के लिए उपयोग कर रहा हूं।

var screenHeight = (ionic.Platform.isIOS()) ? window.screen.height : window.innerHeight * window.devicePixelRatio; 

Answer 8

मेरे मामले में, सेटटाइमआउट हुक उपयोगी नहीं था।

कुछ खुदाई के बाद, मुझे पता चलता है कि विभिन्न एंड्रॉइड संस्करणों (और उपकरणों) में अलग-अलग डिवाइस पिक्सेलरेटियो मान हैं।

यदि डिवाइस पिक्सेलरेटियो बराबर या 1 से अधिक है, तो स्क्रीन में पिक्सेल की वास्तविक संख्या (HTML पृष्ठ बिंदु के लिए) window.screen.width (या ... ऊंचाई) द्वारा दी जाती है।

लेकिन, अगर window.screen.width 1 से कम है (यह कुछ पुराने एंड्रॉइड डिवाइसों में होता है), पिक्सेल की वास्तविक संख्या बन जाती है: window.screen.width/devicePixelRatio।

तो, आपको बस इसका सामना करना होगा।

w = window.screen.width; 
h = window.screen.height; 

if(window.devicePixelRatio < 1){ 
    w = window.screen.width/window.devicePixelRatio; 
    h = window.screen.height/window.devicePixelRatio; 
}