बल "परिदृश्य" अभिविन्यास मोड

Question

मैं अपने आवेदन के लिए "लैंडस्केप" मोड को बाध्य करने की कोशिश कर रहा हूं क्योंकि मेरा एप्लिकेशन "पोर्ट्रेट" मोड के लिए बिल्कुल तैयार नहीं है। मैं उसे कैसे कर सकता हूँ?

Answer 1

यह HTML5 वेबएप मैनिफ़ेस्ट के साथ अब संभव है। निचे देखो।

---

मूल उत्तर:

आप किसी वेबसाइट या वेब एप्लिकेशन को किसी विशिष्ट अभिविन्यास में लॉक नहीं कर सकते। यह डिवाइस के प्राकृतिक व्यवहार के खिलाफ जाता है।

आप इस तरह CSS3 मीडिया प्रश्नों के साथ डिवाइस ओरिएंटेशन का पता लगा सकते हैं :

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

या इस तरह एक जावास्क्रिप्ट अभिविन्यास परिवर्तन घटना बांधने से:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

---

12 नवंबर 2014 को अपडेट: यह अब HTML5 वेबएप मैनिफेस्ट के साथ संभव है।

जैसा कि html5rocks.com पर बताया गया है , अब आप एक manifest.jsonफ़ाइल का उपयोग करके ओरिएंटेशन मोड को बाध्य कर सकते हैं ।

आपको उन पंक्ति को json फ़ाइल में शामिल करना होगा:

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

और आपको अपनी html फ़ाइल में प्रकट को इस तरह शामिल करना होगा:

<link rel="manifest" href="manifest.json">

यह निश्चित रूप से निश्चित नहीं है कि लॉकिंग ओरिएंटेशन मोड के लिए वेबएप मैनिफ़ेस्ट पर क्या समर्थन है, लेकिन क्रोम निश्चित रूप से है। जब मेरे पास जानकारी होगी तब अपडेट करेंगे।

Comments

हां, वेबप भी। यहां तक ​​कि अगर आप अपनी वेबसाइट को आईफोन या आईपैड पर होम स्क्रीन पर "सेव" करते हैं, तो भी वेबैप अपना ओरिएंटेशन बदल देगा।

— रेमी ब्रेटन

Caniuse.com के अनुसार, एंड्रॉइड 4.1 के बाद मैनिफ़ेस्ट का उपयोग किया जा सकता है। Caniuse.com/#feat=offline-apps

— Rémi Breton

मैं कैसे बता सकता हूं कि क्या अभिव्यक्ति को बुलाया जा रहा है? यह मेरे लिए काम नहीं कर रहा है और कुछ भी नहीं दिखाता है कि मेरे विकास उपकरण के नेटवर्क में लोड किया जा सकता है, भले ही यह एक ही स्थान पर हो।

— इयान एस

Chrome में अब आप इंस्पेक्ट मोड में "एप्लिकेशन" टैब को देख सकते हैं, वहां एक "मैनिफेस्ट" पेज है, जिसमें आपकी जसन फाइल का सीधा लिंक है और इसके बारे में जानकारी है।

— ड्रामेस्टर

@ RémiBreton - क्या आप अभी भी उस जानकारी की तलाश में हैं, इसलिए आप अपडेट करते हैं? हम वर्षों से

— ashleedawg

Answer 2

screen.orientation.lock('landscape');

इसे लैंडस्केप मोड में बदलने और रहने के लिए मजबूर करेगा। Nexus 5 पर परीक्षण किया गया।

http://www.w3.org/TR/screen-orientation/#examples

Comments

डिफ़ॉल्ट इंटरनेट ब्राउज़र (क्रोम नहीं) का उपयोग करके एंड्रॉइड पर काम नहीं करता है - कोई विचार?

— एंटोनियोस सिइमूर्तोस

सफ़ारी (iOS और macOS

— MBach

बस एक त्वरित नोट, यह केवल फुलस्क्रीन मोड में प्रवेश करने के बाद काम करता है।

— ठाणे ब्रिमहल

इस विधि को मोज़िला द्वारा हतोत्साहित किया जाता है: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation इसके अलावा इसमें बहुत ही खराब ब्राउज़र संगतता है

— फर्नांडो गार्सिया

यह क्रोम में भी पूर्ण स्क्रीन मोड में काम नहीं करता है: |

— शमशीरज़.नविद

Answer 3

मैं कुछ सीएसएस का उपयोग इस तरह करता हूं ( सीएसएस ट्रिक्स पर आधारित ):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

Comments

मैंने इस उत्तर का उपयोग किया है .. मुझे बस इतना करना है कि मीडिया क्वेरी को इसमें से बदलना landscapeहै portraitऔर यह अपेक्षित रूप से काम करता है@media screen and (orientation: portrait)

— ymz

भविष्य के लोगों की मदद करने के लिए उत्तर का संपादन किया। वर्तमान मोड होने पर रोटेशन लागू किया जाना चाहिए portrait(ताकि यह स्विच हो सके landscape)।

— lfarroco

धन्यवाद। मुझे इसी जैसी किसी चीज़ की तलाश थी।

— अंडरडॉग

मैं इसे पृष्ठ-आईडी-xxx के माध्यम से केवल एक पृष्ठ पर कैसे लागू कर सकता हूं?

— होमर

Answer 4

मेरे पास एक ही समस्या थी, यह एक लापता मैनिफ़ेस्ट था। जेसन फ़ाइल, यदि नहीं मिला तो ब्राउज़र का निर्णय उन्मुखीकरण के साथ सबसे उपयुक्त है, यदि आप फ़ाइल को निर्दिष्ट नहीं करते हैं या गलत रास्ते का उपयोग नहीं करते हैं।

मैंने केवल HTML हेडर पर सही ढंग से मैनिफ़ेस्ट.जॉन को कॉल करने का निर्णय लिया।

मेरा html हेडर:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

और मैनिफ़ेस्ट .json फ़ाइल सामग्री:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

अपने फेवीकों और आइकनों को उत्पन्न करने के लिए इस वेबटूल का उपयोग करें: https://realfavicongenerator.net/

अपनी मैनिफ़ेस्ट फ़ाइल का उपयोग करने के लिए: https://tomitm.github.io/appmanifest/

मेरा पीडब्ल्यूए महान काम करता है, आशा है कि यह मदद करता है!