क्या कोई वेबसाइट डिवाइस रोटेशन लॉक को मजबूर कर सकती है?

Question

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

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

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

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

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

संदर्भ के लिए

:)

अग्रिम

Answer 1

एक अद्यतन में।। एक पुराना ('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; 
} 
}); 

यह केवल सूचना ही दिखाएगा जब डिवाइस अभिविन्यास बदल गया है।

Answer 2

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

Answer 3

मुझे नहीं लगता कि संभव है लेकिन वहाँ तरीके से जोड़ी के आसपास

js तरीके से काम करने के लिए कर रहे हैं: window.DeviceOrientationEvent

सीएसएस रास्ता

@media (orientation: landscape) { body { background-color: black; } }