परिदृश्य और चित्र

Question

के लिए अलग आरंभिक-स्केल सेट मैं Ipad

पर परिदृश्य और चित्र के लिए अलग प्रारंभिक-पैमाना स्थापित करने के लिए

मैं head
<meta name="viewport" content="width=device-width, initial-scale=0.6" />

में जोड़ा neet और मैं इस स्क्रिप्ट का उपयोग करने की कोशिश की

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
      function onOrientationChange() 
      { 
      var viewportmeta = document.querySelector('meta[name="viewport"]'); 
      switch(window.orientation) 
      { 
       case -90: 
       case 90: 
       viewportmeta.content = 'initial-scale=0.6'; 
       break; 
       default: 
       viewportmeta.content = 'initial-scale=0.8'; 
       break; 
      } 
      } 

      window.addEventListener('orientationchange', onOrientationChange); 
      onOrientationChange(); 

लेकिन आईडी सही काम नहीं करती है। क्या इसे काम करने के कोई तरीके हैं?

Answer 1

मूल प्रश्न से जावास्क्रिप्ट कोड काफी जगह पर था और लगभग सही था। जब मैं ब्राउज़र में परीक्षण कर रहा था तो समस्या निम्न थी: window.orientationundefined है और switch खंड इसलिए अनावश्यक है।

मेरे के लिए डेमो निश्चित समाधान यहां पाया जा सकता है: JS Bin, लेकिन मोबाइल डिवाइस पर इसका परीक्षण करना सुनिश्चित करें (इसके बारे में अधिक जानकारी के लिए नीचे पढ़ें)।

सार जो निम्नलिखित JavaScript कोड में है,:

function onOrientationChange() { 

    var landscape = screen.width > screen.height; 
    var viewportmeta = document.querySelector('meta[name="viewport"]'); 

    if(landscape) { 

     viewportmeta.content = "width=device-width, initial-scale=1.0"; 

    } else { 

     viewportmeta.content = "width=device-width, initial-scale=0.5"; 

    } 

} 

window.addEventListener('orientationchange', onOrientationChange); 
onOrientationChange(); 

एक देख सकते हैं कि मैं window.orientation का उपयोग नहीं किया, क्योंकि यह जब मैं ब्राउज़र में परीक्षण किया गया था समस्याओं के कारण, तो मैं बस है स्क्रीन की चौड़ाई और ऊंचाई के अनुपात की जांच की: var landscape = screen.width > screen.height। साथ ही, viewportmeta.content को सेट करते समय, मैंने पूरे मान को प्रतिस्थापित कर दिया है न कि केवल initial-scale=0.6 मूल प्रश्न के रूप में।

चूंकि मेरे पास केवल एंड्रॉइड डिवाइस परीक्षण करने के लिए हैं, इसलिए मैंने आईफोन और आईपैड का पता लगाने के बारे में आईएफ क्लॉज भी हटा दिया है। इसलिए, समाधान डेस्कटॉप ब्राउज़र में भी काम करता है। लेकिन ध्यान रखें, डेस्कटॉप ब्राउज़र orientationchange ईवेंट को आग नहीं लगा सकते हैं। मैंने क्रोम के मोबाइल एमुलेटर की कोशिश की है और यह काम नहीं करता है। मेरा कामकाज अस्थायी रूप से घटना को resize में बदलना था।

Answer 2

आपका मूल उत्तर वास्तव में आपको चाहिए (हालांकि आप अपने कोड स्निपेट में } को बंद कर चुके हैं और मुझे लगता है कि यह सिर्फ एक टाइपो था और कारण यह काम नहीं करता है)!

किसी अन्य उत्तर में उल्लिखित चौड़ाई का उपयोग पोर्ट्रेट और परिदृश्य का पता नहीं लगाएगा क्योंकि एक आईओएस डिवाइस इसकी चौड़ाई को सबसे छोटा आयाम मानता है और यह ऊंचाई का सबसे लंबा आयाम होने की ऊंचाई है। इसलिए आपका स्विच स्टेटमेंट आपके समाधान के लिए जरूरी है और आपको वही चाहिए जो आपको चाहिए (here देखें)।

मैंने अपना कोड लिया और इसे अपने आईफोन पर इस जेएसफ़िल्ड में चलाया (कुछ समायोजन जैसे लापता बंद ब्रेस जोड़ने) और यह ठीक काम किया। यदि आप उपयोगकर्तागेंट पहचान को हटाने के बाद HTML पैनल का निरीक्षण करते हैं (या इसके बजाय क्रोम में एक आईफोन अनुकरण करते हैं) तो आप इसे सामग्री initial-scale=0.8 पर अपडेट करेंगे क्योंकि यह डिफ़ॉल्ट है।

https://jsfiddle.net/80xj03cx/3/

यह स्पष्ट रूप से USERAGENT का पता लगाने की वजह से एक ब्राउज़र में काम नहीं करेगा और वहाँ orientationChange जैसी कोई घटना नहीं है। यदि आपको चलाने के लिए आईओएस डिवाइस की आवश्यकता है तो आप हमेशा इस तरह की एक सेवा का उपयोग कर सकते हैं: https://appetize.io/demo (आप इसे देखने के लिए डेमो में उस बेवकूफ यूआरएल में भी टाइप कर सकते हैं)।

function doOnOrientationChange() { 
    var viewportmeta = document.querySelector('meta[name="viewport"]'); 
    switch(window.orientation) 
    { 
     case -90: 
     case 90: 
     alert('landscape'); // Just for debug obviously 
     viewportmeta.content = 'initial-scale=0.6'; 
     break; 
     default: 
     alert('portrait'); // Just for debug obviously 
     viewportmeta.content = 'initial-scale=0.8'; 
     break; 
    } 
} 

// Only bind the event on iPhone and iPad so we do not try and do this on any other device. 
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
    window.addEventListener('orientationchange', doOnOrientationChange); 
    // Initial execution if needed 
    doOnOrientationChange(); 
}