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


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


76
2018-01-05 05:25


मूल


अच्छा सवाल है, लेकिन मैं शर्त लगाता हूं कि जवाब "संभव नहीं है" हालांकि आप धोखा दे सकते हैं: stackoverflow.com/a/4807047/615754। - nnnnnn
ज़रुरी नहीं। आप सीएसएस ट्रांसफॉर्म का उपयोग करके इसे नकली बना सकते हैं लेकिन यह बदसूरत है, और मुझे नहीं लगता कि यह जानने का एक तरीका है कि यह एंड्रॉइड पर उल्टा है या नहीं। बहुत यकीन है कि इससे पहले यहां चर्चा की गई है। - Dagg Nabbit
वेबसाइट को न्यूनतम चौड़ाई रखने के लिए मजबूर करना संभव है: 320 पीएक्स? इसलिए यदि स्क्रीन का आकार कम रिज़ॉल्यूशन के उपयोगकर्ता को पूर्ण साइट देखने के लिए स्क्रॉल करने की आवश्यकता होगी। या क्या मैं 240px चौड़ाई 320px सामग्री को ज़ूम कर सकता हूं? - coure2011


जवाब:


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

<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>

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

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

अद्यतन करें

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

एक और अद्यतन

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


104
2018-01-05 05:45



+1 न केवल उत्तर के लिए ... आपके वास्तविकता के लिए ...... - BobDroid
विचार के लिए +1 ... - Chetan
मेरा दिन बना दिया! यह एक अच्छा संदेश डालने वाले छोटे उपकरणों पर लैंडस्केप मोड को मजबूर करने के लिए वास्तव में आसान लिपि है। - dhruvpatel
हालांकि आपको सबसे अधिक क्रेडिट मिला है;) आपके अच्छी तरह से वर्णित उत्तर और @ गोलमाल के लिए + 1 डी .. - Hitesh Misro
अधिक स्पष्ट और कार्यात्मक - Erçin Dedeoğlu


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

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

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

43
2018-01-05 05:32



मैं ऐसा कुछ ढूंढ रहा हूं, क्या यह आपके लिए काम करता है ?? - Monica


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

#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>

यह स्वचालित रूप से भी घूर्णन का प्रबंधन करेगा।


29
2018-03-13 17:25



+1 यह घूमने के लिए ट्रांसफॉर्म का उपयोग करके बहुत अच्छा है। चतुर। - Jason Sebring
चालाक, लेकिन वास्तव में काम नहीं करता है। जब पृष्ठ घुमाया जाता है तो अधिकांश पृष्ठ अचूक होता है, क्योंकि केवल सामग्री घुमाया जाता है और वास्तविक ब्राउज़र नहीं। - Graham
यह किसी भी एनीमेशन को तोड़ देगा और यह शायद पृष्ठ की मोबाइल प्रतिक्रिया को नष्ट कर देगा। - Wissam El-Kik


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

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

1