rotation - अपन - फ्री वेबसाइट बनाना है




क्या कोई वेबसाइट एक उपकरण रोटेशन ताला लगा सकती है? (2)

मैं वर्तमान में एक ऐसी वेबसाइट पर काम कर रहा हूं जो सभी उपकरणों के लिए अपेक्षाकृत बराबर है; डेस्कटॉप और मोबाइल मैं% के साथ काम कर रहा हूँ क्योंकि मुझे लगता है कि यह सबसे अच्छा विकल्प है

यह पोर्ट्रेट मोड पर आधारित है। यदि आप उपकरण को परिदृश्य में बदलते हैं, तो पूरी वेबसाइट एक मोटी बौना की तरह दिखाई देती है।

तो मैं सोच रहा हूं: क्या एक वेबसाइट को लॉक करने की कोई संभावना है, जो इसे हर समय चित्र में प्रदर्शित करता है?

और उसके द्वारा, मेरा मतलब है: डिवाइस रोटेशन लॉक किया गया। ऐसा नहीं है कि परिदृश्य में जाने पर, वेबसाइट परिदृश्य में वापस आती है, चित्र में। (जो मैंने पहले से ही StackOverflow पर कुछ कोड देखा था।)

Check my site at: http://prototyping.iscs.nl/mobiel.html 

सन्दर्भ के लिए :)

अग्रिम में धन्यवाद


संभव नहीं। लॉक रोटेशन एक डिवाइस की सेटिंग है: http://support.apple.com/kb/HT4085 डिवाइस द्वारा लॉक नहीं होने पर, ब्राउज़र घुमाएगा और चूंकि आपकी सामग्री ब्राउज़र के अंदर है, सामग्री भी घुमाएगी हो सकता है कि व्यूपोर्ट आपकी समस्या को हल करने में मदद करेगा: <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई" /> "। मुझे लगता है कि आप उस मेटा टैग को याद कर रहे हैं।


एक पुराने ('12) प्रश्न के अपडेट में, मुझे लगता है कि यह बहुत से लोगों की मदद कर सकता है!

मैंने डिवाइस के रोटेशन को लॉक करने का एक सही तरीका नहीं समझा है, लेकिन एक सही विकल्प के साथ आया, जिसे मैंने कुछ लोगों को भी देखा है।

विकल्प ए। एक साधारण चेतावनी

एक सरल jQuery स्क्रिप्ट का उपयोग करके, आप अपने डिवाइस के अभिविन्यास का पता लगा सकते हैं।

if(window.innerHeight > window.innerWidth){
  alert("Please use Landscape!");
}

ठीक है, एक साधारण चेतावनी आसान है, लेकिन सूचना काफी अच्छे हो सकती है!

विकल्प बी। एक अच्छी छवि अधिसूचना

बस अपने पृष्ठ पर एक fixed तत्व जोड़ें जो दिखाया गया है कि जब ओरिएंटेशन बदल गया है।

एचटीएमएल

<div class="turnDeviceNotification"></div>

सीएसएस

.turnDeviceNotification {
  position:fixed;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
}

आप इस तत्व को पाठ के साथ अपडेट कर सकते हैं या बस इसे किसी पृष्ठभूमि-छवि से कनेक्ट कर सकते हैं

.turnDeviceNotification {
  background-image:url('../images/turnDevice.jpg');
  background-size:cover;
}

बस अपने चित्र फ़ोल्डर में एक अच्छी पृष्ठभूमि जोड़ें, जैसे नीचे एक।

नोटिस ऑब्जेक्ट में एक display: none ? ऐसा इसलिए है क्योंकि इसे चित्र मोड में भी दिखाया जाएगा। अब, आपको केवल स्क्रिप्ट का उपयोग करना है, ताकि ऑब्जेक्ट केवल लैंडस्केप मोड में दिखाया जा सके।

jQuery(window).bind('orientationchange', function(e) {
 switch ( window.orientation ) {
  case 0:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 180:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;

  case -90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;
 }
});

यह केवल तब सूचना दिखाएगा जब डिवाइस की ओरिएंटेशन लैंडस्केप में बदल जाएगी।