वेब-साइट को केवल लैंडस्केप मोड में दिखाने के लिए मजबूर करना

Question

मैं अपने वेब-साइट को केवल लैंडस्केप मोड में दिखाना चाहता हूं, क्या यह एक जगह है? इससे कोई फर्क नहीं पड़ता कि उपयोगकर्ता के हाथ में अभिविन्यास डिवाइस का है लेकिन वेब साइट हमेशा लैंडस्केप मोड में रहेगी। मैंने iPhone एप्लिकेशन को इस तरह काम करते देखा है, लेकिन क्या यह एक वेब-साइट के लिए किया जा सकता है?

Comments

अच्छा सवाल है, लेकिन मैं जवाब दूंगा "संभव नहीं है" हालांकि आप धोखा दे सकते हैं: stackoverflow.com/a/4807047/615754 ।

— nnnnnn

ज़रुरी नहीं। आप सीएसएस ट्रांसफ़ॉर्म का उपयोग करके इसे नकली बना सकते हैं लेकिन यह बदसूरत है, और मुझे नहीं लगता कि यह जानने का कोई तरीका है कि क्या यह एंड्रॉइड पर उल्टा है। बहुत यकीन है कि यह यहाँ पहले चर्चा की गई है।

— डग्ग नबबिट

क्या वेबसाइट को मिनट-चौड़ाई: 320px के लिए मजबूर करना संभव है? इसलिए यदि स्क्रीन का आकार कम रिज़ॉल्यूशन का है, तो उपयोगकर्ता को पूरी साइट देखने के लिए स्क्रॉल करना होगा। या क्या मैं 240px चौड़ाई से 320px सामग्री ज़ूम कर सकता हूं?

— Coure2011

मुझे यकीन नहीं है कि यह लिंक आपके लिए कितना उपयोगी हो सकता है लेकिन नवीनतम [जनवरी 2020] फीचर्स W3C w3c.github.io/screen-orientation

— Sarath Sajan

Answer 1

@ गोलमाल ने वाकई इसका जवाब दिया, मैं अभी थोड़ा और क्रियाशील हूं।

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

अभिविन्यास को ले जाने वाले उपयोगकर्ता पर आपका कोई नियंत्रण नहीं है लेकिन आप उन्हें कम से कम संदेश दे सकते हैं। यह उदाहरण रैपर को पोर्ट्रेट मोड में छिपा देगा और चेतावनी संदेश दिखाएगा और फिर चेतावनी संदेश को लैंडस्केप मोड में छिपा देगा और पोर्ट्रेट दिखाएगा।

मुझे नहीं लगता कि यह उत्तर @ गोलमाल से बेहतर है, केवल इसकी तारीफ करना। यदि आपको यह उत्तर पसंद है, तो @ गोलमाल को क्रेडिट देना सुनिश्चित करें।

अपडेट करें

मैं हाल ही में कॉर्डोवा के साथ काम कर रहा हूं और यह पता चला है कि जब आप मूल सुविधाओं तक पहुंच बना लेंगे तो आप इसे नियंत्रित कर सकते हैं।

एक और अपडेट

इसलिए कोर्डोवा को छोड़ने के बाद यह वास्तव में अंत में भयानक है। यदि आप जावास्क्रिप्ट चाहते हैं तो रिएक्ट मूल जैसे कुछ का उपयोग करना बेहतर है। यह वास्तव में आश्चर्यजनक है और मुझे पता है कि यह शुद्ध वेब नहीं है, लेकिन मोबाइल के शुद्ध वेब अनुभव में विफल रहा है।

Comments

मेरा दिन बना दिया! यह एक अच्छा संदेश डालने वाले छोटे उपकरणों पर लैंडस्केप मोड को मजबूर करने के लिए वास्तव में आसान स्क्रिप्ट है।

— druvpatel

हालांकि आपको इसका ज्यादातर श्रेय मिला;) + 1d आपके सुविचारित उत्तर और @ गोलमाल के लिए ..

— हितेश मिस्रो

वास्तव में उपयोगी, धन्यवाद! यदि आप इसे एक अलग स्टाइलशीट में चिपकाते हैं तो यह ध्यान देने योग्य नहीं है।

— मम्म

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

— विंस

Answer 2

जब मैं खुद यहाँ एक उत्तर के लिए इंतजार कर रहा हूँ, मुझे आश्चर्य है कि अगर यह सीएसएस के माध्यम से किया जा सकता है:

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

Answer 3

इसे आज़माएं यह आपके लिए अधिक उपयुक्त हो सकता है

#container { display:block; }
@media only screen and (orientation:portrait){
  #container {  
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {  
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

यह स्वचालित रूप से रोटेशन का प्रबंधन करेगा।

Comments

चतुर, लेकिन वास्तव में काम नहीं करता है। जब घुमाया जाता है तो पृष्ठ का अधिकांश हिस्सा अप्राप्य होता है, क्योंकि केवल सामग्री को घुमाया जाता है, वास्तविक ब्राउज़र को नहीं।

— ग्राहम

यह किसी भी एनीमेशन को तोड़ देगा और यह संभवतः पृष्ठ की मोबाइल जवाबदेही को नष्ट कर देगा।

— विसम अल-किक

Answer 4

मुझे अपने मुख्य कंटेनरों की चौड़ाई के साथ खेलना था:

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}

Comments

अच्छा विचार .. किसी भी कलाकृतियों / शोर जब चित्र / परिदृश्य के बीच स्विच?

— होको