मैं iPhone वेब एप्लिकेशन में पोर्ट्रेट मोड के लिए अभिविन्यास कैसे लॉक करूं?

Question

मैं एक iPhone वेब एप्लिकेशन बना रहा हूं और चित्र मोड में ओरिएंटेशन लॉक करना चाहता हूं। क्या यह संभव है? क्या ऐसा करने के लिए कोई वेब-किट एक्सटेंशन हैं?

कृपया ध्यान दें कि यह मोबाइल सफारी के लिए HTML और जावास्क्रिप्ट में लिखा गया एक एप्लिकेशन है, यह ऑब्जेक्टिव-सी में लिखा गया एक मूल एप्लिकेशन नहीं है।

Comments

वेब एप्लिकेशन बनाने और देशी ऐप न बनाने का पूरा कारण यह है कि यह क्रॉस प्लेटफॉर्म हो सकता है, आप एक iPhone विशिष्ट वेब ऐप क्यों बनाएंगे, क्या आप अन्य फोन लॉक करने के लिए अतिरिक्त कोड लिखने पर विचार कर रहे हैं ???

संबंधित: stackoverflow.com/questions/5298467/…

— xdhmoore

मुझे एक समाधान में दिलचस्पी है जो "छोटे-स्क्रीन" के लिए है और न केवल उन चीजों के लिए जो 320px हैं और सेब द्वारा बनाई गई हैं।

— शेरिफडेरेक

Answer 1

आप व्यूपोर्ट ओरिएंटेशन के आधार पर सीएसएस शैलियों को निर्दिष्ट कर सकते हैं: ब्राउज़र को शरीर के साथ लक्षित करें [ओरिएंट = "लैंडस्केप"] या बॉडी [ओरिएंट = "पोर्ट्रेट]

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

तथापि...

इस मुद्दे पर ऐप्पल का दृष्टिकोण डेवलपर को अभिविन्यास परिवर्तन के आधार पर सीएसएस को बदलने की अनुमति देता है लेकिन पूरी तरह से पुन: उन्मुखीकरण को रोकने के लिए नहीं। मुझे एक समान प्रश्न कहीं और मिला:

http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

Comments

धन्यवाद, लेकिन, मैं उस हिस्से को पहले से ही कर रहा हूं, जो मैं वास्तव में चाहता हूं कि मोबाइल सफारी को रोकने के लिए मुझ पर उन्मुखीकरण स्विच न करें जब उपयोगकर्ता फोन को झुकाता है।

— केविन

इस मुद्दे पर ऐप्पल का दृष्टिकोण डेवलपर को अभिविन्यास परिवर्तन के आधार पर सीएसएस को बदलने की अनुमति देने के लिए है लेकिन पूरी तरह से पुन: उन्मुखीकरण को रोकने के लिए नहीं। मुझे एक और सवाल कहीं और मिला: ask.metafilter.com/99784/…

— स्कॉट फॉक्स

मैंने देखा है कि कुछ साइटें केवल उपयोगकर्ता को निर्देश देते हुए लैंडस्केप-ओनली संदेश दिखाती हैं कि इस साइट को केवल पोर्ट्रेट ओरिएंटेशन में देखा जा सकता है - विचार करने के लिए सिर्फ एक और विकल्प।

— Jayden लॉसन

Answer 2

यह एक सुंदर हैसी समाधान है, लेकिन यह कम से कम कुछ (?) है। विचार अपने पृष्ठ की सामग्री को अर्ध-चित्र मोड में घुमाने के लिए एक सीएसएस परिवर्तन का उपयोग करना है। आपको शुरू करने के लिए यहां जावास्क्रिप्ट (jQuery में व्यक्त) कोड दिया गया है:

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

कोड आपके पृष्ठ की संपूर्ण सामग्री को शरीर के तत्व के अंदर एक div के अंदर रहने की उम्मीद करता है। यह उस डिव को 90 डिग्री पर लैंडस्केप मोड में घुमाता है - बैक टू पोर्ट्रेट।

पाठक को एक अभ्यास के रूप में छोड़ दिया: div अपने केंद्र बिंदु के चारों ओर घूमता है, इसलिए इसकी स्थिति को संभवतः समायोजित करने की आवश्यकता होगी जब तक कि यह पूरी तरह से चौकोर न हो।

इसके अलावा, एक अप्रभावी दृश्य समस्या है। जब आप अभिविन्यास बदलते हैं, तो सफ़ारी धीरे-धीरे घूमती है, फिर शीर्ष-स्तरीय div 90degrees पर अलग-अलग हो जाती है। और भी मज़ेदार के लिए, जोड़ें

body > div { -webkit-transition: all 1s ease-in-out; }

अपने सीएसएस के लिए। जब डिवाइस घूमता है, तब सफारी करता है, तब आपके पेज की सामग्री होती है। आकर्षक!

Comments

ग्रुमड्रिग, आप मेरे हीरो हैं! यह सबसे उपयोगी और काम करने वाला iPhone वेब-ऐप से संबंधित टिप है जो मैंने कभी इस साइट पर देखी है। आपका बहुत बहुत धन्यवाद!

— नोबल

इससे पहले कि मैं इस प्रतिक्रिया को पढ़ूं, मैं "स्वीकृत" उत्तर टिप्पणियों पर सुझाव देने वाला था कि किसी को ईएलएसई को यह प्रयास करना चाहिए और मुझे यह बताना चाहिए कि क्या यह काम करता है। मैं वास्तव में किसी को पहले से ही खुश हूँ, और यह किया है!

— लेन

क्या होगा अगर div आयताकार है? परिवर्तन मूल को सही ढंग से सेट करने का सूत्र क्या है? TA

— सुपरजोस

आप Iphone / iPod विकास जानकारी के तहत, XCode पर "समर्थित इंटरफ़ेस ओरिएंटेशन" विकल्प द्वारा भी इसे नियंत्रित कर सकते हैं। अच्छी तरह से काम किया

— रोड्रिगो डायस

क्या हम शरीर को सीधे नहीं घुमा सकते हैं? कहो, $ ("बॉडी")। css ("- वेबकिट-ट्रांसफॉर्म",; पोर्ट्रेट; "रोटेट (-90deg)": "");

— कृष्ण चैतन्य

Answer 3

यह उत्तर अभी तक संभव नहीं है, लेकिन मैं इसे "भविष्य की पीढ़ियों" के लिए पोस्ट कर रहा हूं। उम्मीद है, किसी दिन हम इसे सीएसएस @viewport नियम के माध्यम से कर पाएंगे:

@viewport {
    orientation: portrait;
}

यहां "क्या मैं उपयोग कर सकता हूं" पृष्ठ (2019 तक केवल IE और एज) है:
https://caniuse.com/#feat=mdn-css_at-rules_viewport_orientation

कल्पना (प्रक्रिया में):
https://drafts.csswg.org/css-device-adapt/#orientation-desc

MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation

MDN ब्राउज़र संगतता तालिका और निम्न लेख के आधार पर, ऐसा लगता है कि IE और ओपेरा के कुछ संस्करणों में कुछ समर्थन है:
http://menacingcloud.com/?c=cssViewportOrMetaTag

यह JS API युक्ति भी प्रासंगिक लगती है:
https://w3c.github.io/screen-orientation/

मैंने यह मान लिया था कि क्योंकि यह प्रस्तावित @viewportनियम से संभव था , कि यह orientationएक metaटैग में व्यूपोर्ट सेटिंग्स में सेट करके संभव होगा , लेकिन मुझे अब तक इसके साथ कोई सफलता नहीं मिली है।

इस जवाब को अद्यतन करने के लिए स्वतंत्र महसूस करें क्योंकि चीजें बेहतर होती हैं।

Comments

10/2019 तक, यह नई सुविधा अभी तक काम नहीं कर रही है। कृपया हमें तैनात रखें। धन्यवाद।

— रेनकास्ट

वास्तव में यह बहुत लंबा है मुझे आश्चर्य है कि अगर यह कभी भी होगा। मैंने "CanIUse" पेज के लिए एक लिंक जोड़ा है।

— xdhmoore

धन्यवाद। क्या आप इस सुविधा के स्वामी हैं? मुझे समझ में नहीं आता है कि एक नई सीएसएस सुविधा कैसे जारी की जाती है। मेरे अनुमान में, सीएसएस ओआरजी प्रत्येक प्रमुख ब्राउज़र उत्पाद मालिकों से बात करता है, और उन्हें इसका समर्थन करने के लिए कहता है? प्रक्रिया को कौन नियंत्रित करता है? मैं बहुत उत्सुक हूँ।

— रेनकॉस्ट

हा नहीं बस एक और डेवलपर। आप W3C की तलाश कर रहे हैं।

— xdhmoore

Answer 4

हमारे HTML5 गेम में निम्नलिखित कोड का उपयोग किया गया था।

$(document).ready(function () {
     $(window)    
          .bind('orientationchange', function(){
               if (window.orientation % 180 == 0){
                   $(document.body).css("-webkit-transform-origin", "")
                       .css("-webkit-transform", "");               
               } 
               else {                   
                   if ( window.orientation > 0) { //clockwise
                     $(document.body).css("-webkit-transform-origin", "200px 190px")
                       .css("-webkit-transform",  "rotate(-90deg)");  
                   }
                   else {
                     $(document.body).css("-webkit-transform-origin", "280px 190px")
                       .css("-webkit-transform",  "rotate(90deg)"); 
                   }
               }
           })
          .trigger('orientationchange'); 
});

Comments

आप ट्रांसफॉर्मिंग मूल के लिए उन नंबरों का कैसे पता लगा सकते हैं?

— सुपरजोस

चेतावनी !!! सभी डिवाइस अभिविन्यास के लिए समान मानों की रिपोर्ट नहीं करते हैं, इसलिए इसे मैथ्यूगिफ़र्ड.com

— रोब

Answer 5

मैं मीडिया के प्रश्नों का उपयोग करके स्क्रीन को घुमाने के इस सीएसएस के साथ ही आया। क्वेरी स्क्रीन आकार पर आधारित हैं जो मुझे यहां मिलीं । 480px एक अच्छा लग रहा था क्योंकि कुछ / कुछ उपकरणों में 480px से अधिक चौड़ाई या 480px से कम ऊँचाई नहीं थी।

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        width: 320px; /*this is the iPhone screen width.*/
        position: absolute;
        top: 100%;
            left: 0
    }
}

Comments

+1 अच्छा समाधान। मेरे पास एक पाद है जो नीचे स्थित स्थिति है। किसी भी विचार कैसे रोटेशन के बाद इसे प्रदर्शित करने के लिए?

— साइब्रिक्स

विशिष्ट पिक्सेल मूल्यों के बजाय मीडिया क्वेरी में उपयोग (अभिविन्यास: परिदृश्य) के बारे में कैसे? या क्या एक सटीक पिक्सेल मान को परिभाषित करने की आवश्यकता है?

— जस्टिन पुटनी

मैंने एक पिक्सेल मान का उपयोग किया क्योंकि आपको HTML पर एक सटीक मान सेट करना होगा, जो स्क्रीन की ऊँचाई से मेल खाना चाहिए (जब परिदृश्य में - तो स्क्रीन की चौड़ाई)। इसलिए orientation: landscapeमेरे उदाहरण @JustinPutney

— Bill

MDN से: "नोट: यह मान वास्तविक डिवाइस ओरिएंटेशन के अनुरूप नहीं है। पोर्ट्रेट ओरिएंटेशन में अधिकांश डिवाइसों पर सॉफ्ट कीबोर्ड खोलने से व्यूपोर्ट अधिक लंबा हो जाएगा, जिससे ब्राउज़र को पोर्ट्रेट के बजाय लैंडस्केप शैलियों का उपयोग करना पड़ेगा। "

— शेरिफडेरेक

ओरिएंटेशन @मीडिया नियम --- हाँ। सोचा कि जब तक मैं इसे नहीं पढ़ता, वे जाने वाले थे: developer.mozilla.org/en-US/docs/Web/Guide/CSS/…

— sheriffderek

Answer 6

Screen.lockOrientation() इस समस्या को हल करता है, हालांकि समय (अप्रैल 2017) में सार्वभौमिक से समर्थन कम है:

https://www.w3.org/TR/screen-orientation/

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

Comments

MDN डॉक्टर का सुझाव है कि यह सफारी द्वारा समर्थित नहीं है।

— TSH

Answer 7

मुझे उपयोगकर्ता को अपना फोन वापस पोर्ट्रेट मोड में रखने के लिए कहने का विचार पसंद है। जैसे यह यहाँ बताया गया है: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... लेकिन जावास्क्रिप्ट के बजाय CSS का उपयोग करना।

Answer 8

हो सकता है कि एक नए भविष्य में यह एक आउट-ऑफ-द-बॉक्स सॉल्यूशन होगा ...

मई 2015 तक,

एक प्रयोगात्मक कार्यक्षमता है जो ऐसा करती है।

लेकिन यह केवल फ़ायरफ़ॉक्स 18+, IE11 + और क्रोम 38+ पर काम करता है।

हालाँकि, यह अभी ओपेरा या सफारी पर काम नहीं करता है।

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

यहाँ संगत ब्राउज़रों के लिए वर्तमान कोड है:

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

lockOrientation("landscape-primary");

Comments

मैं इसे अपने वर्डप्रेस वेबसाइट में अपने जावास्क्रिप्ट कोड के रूप में उपयोग कर रहा हूं: screen.lockOrientation ("लैंडस्केप"); और यह काम नहीं करता है। मुझे मिलता है: jQuery (...)। LockOrientation एक फ़ंक्शन नहीं है। क्या मुझे किसी भी प्लगइन या ढांचे को लागू करने की आवश्यकता है?

— एलेक्स स्टैनसी

Answer 9

जब आप अभिविन्यास परिवर्तन को प्रभावी होने से नहीं रोक सकते हैं तो आप अन्य उत्तरों में बताए अनुसार कोई परिवर्तन नहीं कर सकते।

पहले डिवाइस ओरिएंटेशन या पुनर्संयोजन का पता लगाएं और, जावास्क्रिप्ट का उपयोग करके, अपने रैपिंग तत्व में एक वर्ग का नाम जोड़ें (इस उदाहरण में मैं बॉडी टैग का उपयोग करता हूं)।

function deviceOrientation() {
  var body = document.body;
  switch(window.orientation) {
    case 90:
      body.classList = '';
      body.classList.add('rotation90');
      break;
    case -90:
      body.classList = '';
      body.classList.add('rotation-90');
      break;
    default:
      body.classList = '';
      body.classList.add('portrait');
      break;
  }
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();

फिर यदि डिवाइस लैंडस्केप है, तो शरीर की चौड़ाई को व्यूपोर्ट की ऊँचाई पर और शरीर की ऊँचाई को व्यूपोर्ट की चौड़ाई पर सेट करने के लिए CSS का उपयोग करें। और हम उस पर होने के दौरान परिवर्तन मूल सेट करते हैं।

@media screen and (orientation: landscape) {
  body {
    width: 100vh;
    height: 100vw;
    transform-origin: 0 0;
  }
}

अब, बॉडी एलिमेंट को पुन: पेश करें और इसे स्थिति में स्लाइड करें (अनुवाद करें)।

body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
}

Answer 10

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

यह या एक समान सीएसएस समाधान, कम से कम आपके लेआउट को संरक्षित करेगा यदि वह वही है जो आप बाद में हैं।

रूट समाधान उन्हें सीमित करने के प्रयास के बजाय डिवाइस की क्षमताओं के लिए लेखांकन है। अगर डिवाइस आपको एक साधारण हैक की तुलना में उचित सीमा की अनुमति नहीं देता है तो डिजाइन अनिवार्य रूप से अधूरा होने के कारण आपकी सबसे अच्छी शर्त है। बेहतर सरल है।

Answer 11

कॉफी में अगर किसी को इसकी जरूरत है।

    $(window).bind 'orientationchange', ->
        if window.orientation % 180 == 0
            $(document.body).css
                "-webkit-transform-origin" : ''
                "-webkit-transform" : ''
        else
            if window.orientation > 0
                $(document.body).css
                    "-webkit-transform-origin" : "200px 190px"
                    "-webkit-transform" : "rotate(-90deg)"
            else
                $(document.body).css
                    "-webkit-transform-origin" : "280px 190px"
                    "-webkit-transform" : "rotate(90deg)"

Answer 12

@ Grumdrig के उत्तर से प्रेरित, और क्योंकि कुछ उपयोग किए गए निर्देश काम नहीं करेंगे, मैं निम्नलिखित स्क्रिप्ट का सुझाव देता हूं यदि किसी और व्यक्ति की आवश्यकता हो:

    $(document).ready(function () {

      function reorient(e) {
        var orientation = window.screen.orientation.type;
        $("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
      }
    $(window).on("orientationchange",function(){
        reorient();
    });
      window.setTimeout(reorient, 0);
    });

Answer 13

मेरे पास एक समान मुद्दा है, लेकिन परिदृश्य बनाने के लिए ... मेरा मानना ​​है कि नीचे दिए गए कोड को चाल करना चाहिए:

//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
  var orientation = window.orientation;
  if (forceOrientation != undefined)
    orientation = forceOrientation;
  var domElement = document.getElementById('fullscreen-element-div');
  switch(orientation) {
    case 90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
      break;
    case -90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
      break;
    default:
      domElement.style.width = "100vw";
      domElement.style.height = "100vh";
      domElement.style.transformOrigin="";
      domElement.style.transform="";
      break;
  }
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();

<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
  <div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
  <br>
  <input type="button" value="force 90" onclick="processOrientation(90);" /><br>
  <input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
  <input type="button" value="back to normal" onclick="processOrientation();" />
  </div>
</body>
</html>

Answer 14

मेरी वेबसाइट से एक ट्यूटोरियल और काम करने के उदाहरण के लिए यहां क्लिक करें।

जब तक आप वास्तव में PhoneGap का उपयोग नहीं करते हैं, तब तक आपको केवल jQuery मोबाइल स्क्रीन ओरिएंटेशन देखने के लिए हैक का उपयोग करने की आवश्यकता नहीं है और न ही आपको PhoneGap का उपयोग करना चाहिए।

वर्ष 2015 में इस कार्य को करने के लिए हमें चाहिए:

• कॉर्डोवा (4.0 से ऊपर का कोई भी संस्करण बेहतर है)
• PhoneGap (आप PhoneGap का उपयोग भी कर सकते हैं, प्लगइन्स संगत हैं)

और आपके कॉर्डोवा संस्करण के आधार पर इनमें से एक प्लगइन्स:

• net.yoik.cordova.plugins.screenorientation (कॉर्डोवा <4)

कॉर्डोवा प्लगइन net.yoik.cordova.plugins.screenorientation जोड़ें

• कॉर्डोबा प्लगइन कॉर्डोवा-प्लगइन-स्क्रीन-ओरिएंटेशन जोड़ें (कॉर्डोवा> = 4)

कॉर्डोवा प्लगइन कॉर्डोबा-प्लगइन-स्क्रीन-ओरिएंटेशन जोड़ते हैं

और स्क्रीन अभिविन्यास लॉक करने के लिए बस इस फ़ंक्शन का उपयोग करें:

screen.lockOrientation('landscape');

इसे खोलने के लिए:

screen.unlockOrientation();

संभावित अभिविन्यास:

• पोर्ट्रेट-प्राइमरी ओरिएंटेशन प्राइमरी पोर्ट्रेट मोड में है।

• पोर्ट्रेट-सेकेंडरी ओरिएंटेशन सेकंडरी पोर्ट्रेट मोड में है।

• लैंडस्केप-प्राइमरी ओरिएंटेशन प्राइमरी लैंडस्केप मोड में है।

• लैंडस्केप-सेकेंडरी ओरिएंटेशन सेकंडरी लैंडस्केप मोड में है।

• पोर्ट्रेट ओरिएंटेशन पोर्ट्रेट-प्राइमरी या पोर्ट्रेट-सेकेंडरी (सेंसर) है।

• परिदृश्य ओरिएंटेशन या तो परिदृश्य-प्राथमिक या लैंडस्केप-द्वितीयक (सेंसर) है।