आईओएस

Question

पर वास्तविक व्यूपोर्ट चौड़ाई और ऊंचाई निर्धारित करने के लिए कैसे करें I पृष्ठ पर ज़ूम किए जाने पर आईओएस पर पेज चौड़ाई और ऊंचाई निर्धारित करने के रूप में मैं इस तरह के आसान कार्य पर अटक गया हूं।

समस्या यह है कि कुछ वेब साइटों अजीब लेआउट है और इस तरह दिखता है:

यह एक नहीं बढ़ाया पेज है और यह 1164x1811 पिक्सल के संकल्प है और जो सही है। मुझे ये मान window.innerWidth और window.innerHeight से प्राप्त हुए हैं। हाइलाइट किया गया क्षेत्र एक बॉडी एलिमेंट है और इसमें 1024x1594 पिक्सेल का संकल्प है, जो मायने रखता है।

अगला मैं पिंच-टू-जूम का उपयोग में पेज ज़ूम करने के लिए और इस कि यह कैसा दिखता है:

अब, जब मैं पृष्ठ आकार पाने के लिए मैं क्रमशः window.innerWidth और window.innerHeight से 1024x1594 पिक्सल मिला कोशिश कर । ये मान शरीर के आकार के समान सटीक हैं।

तो सवाल यह है कि ज़ूम के साथ सही पेज आकार कैसे प्राप्त करें।

मैंने क्रोम में इस विशेष मामले का परीक्षण किया है और सही परिणाम प्राप्त किया है: ज़ूम करने के बावजूद यह हमेशा 1164x1811 पिक्सेल है।

Answer 1

संपादित करें: उपयोग document.body.clientWidth और document.body.clientHeight, गणना आप इच्छा के रूप में प्राप्त करने के लिए अपने मूल समाधान अब अप्रचलित माना जाता है।

आप document.width और document.height का उपयोग आईओएस सफारी पर मूल पृष्ठ आकार को पुनः प्राप्त कर सकते हैं, भले ही आप पिंच-जूम है।

यहां पुराने Space Jam site पर एक परीक्षण है (जो किसी साइट के बारे में सोचने की कोशिश करते समय ध्यान में आया जो निश्चित रूप से उत्तरदायी नहीं होगा)।

Answer 2

यहाँ एक जटिल काम है लेकिन थोड़े बेकार तरीका है: एक पृष्ठ आकार तत्व तो गणना बनाओ/उसके वास्तविक आकार मिलता है।

let page_size = { height: null, width: null }; 
{ 
    let div = document.createElement('div'); 
    (styles => Object.keys(styles).forEach(k => div.style[k] = styles[k]))({ 
     height: '100vh', width: '100vw', 
     position: 'fixed', 
     top: '-100vh', left: '-100vw' 
    }) 
    document.body.appendChild(div); 
    page_size.height = div.offsetHeight; 
    page_size.width = div.offsetWidth; 
}