दिलचस्प पोस्ट
कोड प्रथम: स्वतंत्र संघ बनाम विदेशी कुंजी संघों? फ़ायरफ़ॉक्स पर कैशिंग बंद कैसे करें? यूनिकोड अनुपूरक बहुभाषी विमान प्रतीकों के साथ वेबफॉन्ट बनाएं एंड्रॉइड: USB का पता लगा रहा है सॉकेट.ओ और वेबसाईट्स के बीच अंतर उपयोगकर्ताकैग और ग्रीज़म्नकी: एक वेबसाइट के जावास्क्रिप्ट फ़ंक्शन को कॉल करना क्या नियमित अभिव्यक्तियों को नेस्टेड पैटर्न से मिलान करने के लिए इस्तेमाल किया जा सकता है? window.localStorage बनाम chrome.storage.local क्या संकेतक का आकार सी में भिन्न होता है? चरित्र सेट और मिलान का मतलब क्या है? उपप्रक्रिया में कई पाइप किसी यूआरएल में टुकड़ा पहचानकर्ता के लिए मान्य पात्रों की सूची? यूसीएम में समग्र बेसलाइन क्या है और इसका उपयोग कब किया जाएगा? MVC 4 वेब एपीआई में Json.NET के लिए कस्टम JsonSerializer सेटिंग्स सेट करने के लिए कैसे करें? एसक्यूएल में सभी कॉलम मूल्यों को समेटना

व्यूपोर्ट ओरिएंटेशन का पता लगाएं, यदि ओरिएंटेशन पोर्ट्रेट डिस्प्ले चेतावनी संदेश है जो उपयोगकर्ता के निर्देशों को सलाह देता है

मैं विशेष रूप से मोबाइल उपकरणों के लिए एक वेबसाइट का निर्माण कर रहा हूं। विशेष रूप से एक पृष्ठ है जो लैंडस्केप मोड में सबसे अच्छी तरह से देखा जाता है।

क्या यह पता लगाने का एक तरीका है कि उपयोगकर्ता उस पृष्ठ पर जाकर इसे पोर्ट्रेट मोड में देख रहा है और यदि ऐसा है, तो उपयोगकर्ता को सूचित करते हुए संदेश दिखाएं कि पेज लैंडस्केप मोड में सबसे अच्छा दिखता है? यदि उपयोगकर्ता पहले से ही इसे लैंडस्केप मोड में देख रहा है तो कोई संदेश नहीं दिखाई देगा।

तो मूल रूप से, मैं साइट को व्यूपोर्ट ओरिएंटेशन का पता लगाने के लिए चाहते हैं, यदि ओरिएंटेशन पोर्ट्रेट है , तो उपयोगकर्ता को चेतावनी संदेश दिखाएं कि यह पृष्ठ लैंडस्केप मोड में सबसे अच्छी तरह से देखा गया है।

बहुत धन्यवाद, दान

वेब के समाधान से एकत्रित समाधान "व्यूपोर्ट ओरिएंटेशन का पता लगाएं, यदि ओरिएंटेशन पोर्ट्रेट डिस्प्ले चेतावनी संदेश है जो उपयोगकर्ता के निर्देशों को सलाह देता है"

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

jQuery के मोबाइल में ऐसी कोई घटना है जो इस संपत्ति के परिवर्तन को संभालती है … यदि आप चेतावनी देना चाहते हैं कि कोई व्यक्ति बाद में घुमाएगा – अभिविन्यास

इसके अलावा, कुछ googling के बाद, window.orientation जाँच करें। window.orientation (जो मुझे विश्वास है डिग्री में मापा …

आप window.matchMedia भी उपयोग कर सकते हैं, जिसका उपयोग मैं करता हूं और पसंद करता हूं क्योंकि यह सीएसएस वाक्यविन्यास के समान है:

 if (window.matchMedia("(orientation: portrait)").matches) { // you're in PORTRAIT mode } if (window.matchMedia("(orientation: landscape)").matches) { // you're in LANDSCAPE mode } 

आईपैड 2 पर परीक्षण किया

डेविड वाल्श के पास एक बेहतर और बिंदु दृष्टिकोण है।

 // Listen for orientation changes window.addEventListener("orientationchange", function() { // Announce the new orientation number alert(window.orientation); }, false); 

इन परिवर्तनों के दौरान, विंडो। औचित्य संपत्ति बदल सकती है। 0 का मान पोर्ट्रेट व्यू, -90 का मतलब है कि एक उपकरण परिदृश्य ठीक से घूमता है, और 90 का मतलब है कि डिवाइस परिदृश्य को बाईं तरफ घुमाया गया है।

http://davidwalsh.name/orientation-change

आप CSS3 का उपयोग कर सकते हैं:

 @media screen and (orientation:landscape) { body { background: red; } } 

ऐसा करने के कुछ तरीके हैं, उदाहरण के लिए:

  • window.orientation जाँच करें। window.orientation मान
  • innerHeight बनाम innerWidth तुलना करें

आप नीचे दिए गए तरीकों में से एक को अनुकूलित कर सकते हैं।


जांच करें कि डिवाइस पोर्ट्रेट मोड में है या नहीं

 function isPortrait() { return window.innerHeight > window.innerWidth; } 

जांच लें कि डिवाइस लैंडस्केप मोड में है या नहीं

 function isLandscape() { return (window.orientation === 90 || window.orientation === -90); } 

उदाहरण उपयोग

 if (isPortrait()) { alert("This page is best viewed in landscape mode"); } 

मैं ओरिएंटेशन परिवर्तन कैसे पता लगा सकता हूं?

 $(document).ready(function() { $(window).on('orientationchange', function(event) { console.log(orientation); }); }); 

मुझे लगता है कि अधिक स्थिर समाधान विंडो के बजाय स्क्रीन का उपयोग करना है, क्योंकि यह डेस्कटॉप-कंप्यूटर पर आपके ब्राउज़र विंडो का आकार बदल सकता है – परिदृश्य या चित्र दोनों।

 if (screen.height > screen.width){ alert("Please use Landscape!"); } 

निश्चित खिड़की का प्रयास न करें। मान्यता प्रश्न (0, 90 आदि का अर्थ चित्र, परिदृश्य आदि नहीं है):

http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/

यहां तक ​​कि IOS7 पर भी आप ब्राउज़र में कैसे आते हैं 0 हमेशा चित्र नहीं है

मेरे दैनिक कोडिंग के लिए इन सभी महान टिप्पणियों को लागू करने के लिए, अपने सभी आवेदनों के बीच निरंतरता के लिए, मैंने अपने jquery और jquery मोबाइल कोड दोनों में निम्नलिखित का उपयोग करने का निर्णय लिया है।

 window.onresize = function (event) { applyOrientation(); } function applyOrientation() { if (window.innerHeight > window.innerWidth) { alert("You are now in portrait"); } else { alert("You are now in landscape"); } } 

कुछ प्रयोगों के बाद मैंने पाया है कि एक अभिविन्यास जागरूक डिवाइस को घूर्णन करने से हमेशा एक ब्राउज़र विंडो का resize । तो अपने आकार बदलने वाले में बस एक फ़ंक्शन कॉल करें:

 function is_landscape() { return (window.innerWidth > window.innerHeight); } 

अभिविन्यास (अपने जेएस कोड में किसी भी समय) के माध्यम से प्राप्त करें

 window.orientation 

जब window.orientation 0 या 180 देता है तो आप पोर्ट्रेट मोड में हैं , 90 या 270 लौटते समय आप परिदृश्य मोड में हैं

मैंने दो समाधान जोड़ दिए और यह मेरे लिए ठीक काम करता है

 window.addEventListener("orientationchange", function() { if (window.matchMedia("(orientation: portrait)").matches) { alert("PORTRAIT") } if (window.matchMedia("(orientation: landscape)").matches) { alert("LANSCAPE") } }, false); 
 //see also http://stackoverflow.com/questions/641857/javascript-window-resize-event //see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html /* Be wary of this: While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task. */ //setup window.onresize = function(event) { window_resize(event); } //timeout wrapper points with doResizeCode as callback function window_resize(e) { window.clearTimeout(resizeTimeoutId); resizeTimeoutId = window.setTimeout('doResizeCode();', 10); } //wrapper for height/width check function doResizeCode() { if(window.innerHeight > window.innerWidth){ alert("Please view in landscape"); } } 

आईओएस screen.height अपडेट नहीं करता screen.width screen.height और screen.heightscreen.height समय एंड्रॉइड अपडेट window.orientation करता।

इस समस्या का मेरा समाधान:

 var isAndroid = /(android)/i.test(navigator.userAgent); if(isAndroid) { if(screen.width < screen.height){ //portrait mode on Android } } else { if(window.orientation == 0){ //portrait mode iOS and other devices } } 

आप इस कोड को एंड्रॉइड के साथ-साथ आईओएस में निम्न कोड का पता लगा सकते हैं:

 var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, function() { alert("the orientation has changed"); }, false); 

यदि onorientationchange घटना समर्थित नहीं है, तो घटना बाध्य हो जाएगी फिर से resize घटना।

मार्ग मार्गदर्शन करने के लिए tobyodavies के लिए धन्यवाद।

मोबाइल डिवाइस के अभिविन्यास के आधार पर एक चेतावनी संदेश प्राप्त करने के लिए आपको function setHeight() { के नीचे निम्न स्क्रिप्ट को कार्यान्वित करने की आवश्यकता है function setHeight() {

 if(window.innerHeight > window.innerWidth){ alert("Please view in landscape"); } 

270 के बजाय, यह -90 (शून्य से 90) हो सकता है।

चौड़ाई / ऊंचाई की तुलना के आधार पर अभिविन्यास निर्धारित करने के लिए एक अन्य विकल्प:

 var mql = window.matchMedia("(min-aspect-ratio: 4/3)"); if (mql.matches) { orientation = 'landscape'; } 

आप इसका उपयोग "पुन: आकार" ईवेंट पर करें:

 window.addEventListener("resize", function() { ... }); 

यह पिछले उत्तर पर फैलता है। मैंने जो सबसे अच्छा उपाय पाया है, वह एक निर्दोष सीएसएस विशेषता बनाने के लिए है, जो कि एक CSS3 मीडिया क्वेरी से मेल खाती है, और उसके बाद उस विशेषता के लिए जेएस परीक्षा होती है।

उदाहरण के लिए, आपके पास सीएसएस में है:

 @media screen only and (orientation:landscape) { // Some innocuous rule here body { background-color: #fffffe; } } @media screen only and (orientation:portrait) { // Some innocuous rule here body { background-color: #fffeff; } } 

फिर आप जावास्क्रिप्ट पर जाइए (मैं आनन्दियों के लिए jQuery का उपयोग कर रहा हूं) रंग घोषणाएं अजीब हो सकती हैं, इसलिए आप कुछ और का उपयोग करना चाह सकते हैं, लेकिन यह मुझे इसकी जांच करने के लिए सबसे आसान तरीका है। फिर आप स्विचिंग पर लेने के लिए रीसाइज ईवेंट का उपयोग कर सकते हैं। इसे सभी के लिए एक साथ रखें:

 function detectOrientation(){ // Referencing the CSS rules here. // Change your attributes and values to match what you have set up. var bodyColor = $("body").css("background-color"); if (bodyColor == "#fffffe") { return "landscape"; } else if (bodyColor == "#fffeff") { return "portrait"; } } $(document).ready(function(){ var orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); $(document).resize(function(){ orientation = detectOrientation(); alert("Your orientation is " + orientation + "!"); }); }); 

इसका सबसे अच्छा हिस्सा यह है कि मेरे उत्तर में यह लिखा गया है, यह डेस्कटॉप इंटरफेस पर कोई प्रभाव नहीं पड़ता है, क्योंकि वे (आम तौर पर) पृष्ठ पर अभिविन्यास के लिए कोई तर्क नहीं देते (लगता है)।

डेविड वाल्श के आलेख ( मोबाइल उपकरणों पर ओरिएंटेशन चेंज ) की खोज के आधार पर यहां मैंने पाया सबसे अच्छी पद्धति है

 if ( window.matchMedia("(orientation: portrait)").matches ) { alert("Please use Landscape!") } 

स्पष्टीकरण:

Window.matchMedia () एक मूल पद्धति है जो आपको किसी मीडिया क्वेरी नियम को परिभाषित करने और किसी भी समय इसकी वैधता की जांच करने की अनुमति देती है।

मुझे इस पद्धति के बदले मूल्य पर एक onchange श्रोता को जोड़ने के लिए उपयोगी लगता है। उदाहरण:

 var mediaQueryRule = window.matchMedia("(orientation: portrait)") mediaQueryRule.onchange = function(){ alert("screen orientation changed") } 

मैं एंड्रॉइड क्रोम "स्क्रीन ओरिएंटेशन एपीआई" के लिए इस्तेमाल किया

वर्तमान ओरिएंटेशन कॉल कंसोल। लॉग (स्क्रीन। ओरिएंटेशन। टाइप) (और शायद स्क्रीन। ओरिएन्टेशन.एंगल) को देखने के लिए।

परिणाम: चित्र प्राथमिक | चित्र-माध्यमिक | परिदृश्य-प्राथमिक | परिदृश्य माध्यमिक

नीचे मेरा कोड है, मुझे आशा है कि यह सहायक होगा:

 var m_isOrientation = ("orientation" in screen) && (typeof screen.orientation.lock == 'function') && (typeof screen.orientation.unlock == 'function'); ... if (!isFullscreen()) return; screen.orientation.lock('landscape-secondary').then( function() { console.log('new orientation is landscape-secondary'); }, function(e) { console.error(e); } );//here's Promise ... screen.orientation.unlock(); 
  • मैं केवल एंड्रॉइड क्रोम के लिए परीक्षण किया – ठीक है

आईओएस उपकरणों पर जावास्क्रिप्ट में खिड़की ऑब्जेक्ट में एक अभिविन्यास गुण है जो डिवाइस के रोटेशन को निर्धारित करने के लिए इस्तेमाल किया जा सकता है। निम्नलिखित मूल्यों को दर्शाता है। आईओएस उपकरणों के लिए विचाराधीन (जैसे आईफोन, आईपैड, आइपॉड) अलग-अलग झुकाव पर।

यह समाधान Android उपकरणों के लिए भी काम करता है मैंने एंड्रॉइड नेटवर्टर ब्राउज़र (इंटरनेट ब्राउज़र) और क्रोम ब्राउज़र में चेक किया, यहां तक ​​कि इसके पुराने संस्करणों में भी।

 function readDeviceOrientation() { if (Math.abs(window.orientation) === 90) { // Landscape } else { // Portrait } } 

सीसीएस केवल

 @media (max-width: 1024px) and (orientation: portrait){ /* tablet and smaller */ body:after{ position: absolute; z-index: 9999; width: 100%; top: 0; bottom: 0; content: ""; background: #212121 url(http://img.hiwab.com/javascript/sValK.png) 0 0 no-repeat; /* replace with an image that tells the visitor to rotate the device to landscape mode */ background-size: 100% auto; opacity: 0.95; } } 

कुछ मामलों में आप विज़िटर को डिवाइस पर घुमाए जाने के बाद पेज पर पुनः लोड करने के लिए कोड का एक छोटा सा टुकड़ा जोड़ना चाह सकते हैं, ताकि सीएसएस ठीक से गाया गया हो:

 window.onorientationchange = function() { var orientation = window.orientation; switch(orientation) { case 0: case 90: case -90: window.location.reload(); break; } }; 

यही है वह जो मेरे द्वारा उपयोग किया जाता है।

 function getOrientation() { // if window.orientation is available... if( window.orientation && typeof window.orientation === 'number' ) { // ... and if the absolute value of orientation is 90... if( Math.abs( window.orientation ) == 90 ) { // ... then it's landscape return 'landscape'; } else { // ... otherwise it's portrait return 'portrait'; } } else { return false; // window.orientation not available } } 

कार्यान्वयन

 window.addEventListener("orientationchange", function() { // if orientation is landscape... if( getOrientation() === 'landscape' ) { // ...do your thing } }, false); 

मैं सबसे अधिक वोट वाले उत्तर से असहमत हूं। screen और न window उपयोग करें

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

ऐसा करने का सही तरीका क्या है अगर आप window.height साथ गणना करते हैं। window.height , आपको एंड्रॉइड पर परेशानी होगी। जब कीबोर्ड खुला होता है, खिड़की सिकुड़ती है इसलिए खिड़की के बजाय स्क्रीन का उपयोग करें

screen.orientation.typescreen.orientation.typescreen.orientation.type एक अच्छा जवाब है लेकिन IE के साथ https://caniuse.com/#search=screen.orientation

 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rotation Test</title> <link type="text/css" href="css/style.css" rel="stylesheet"></style> <script src="js/jquery-1.5.min.js" type="text/javascript"></script> <script type="text/javascript"> window.addEventListener("resize", function() { // Get screen size (inner/outerWidth, inner/outerHeight) var height = $(window).height(); var width = $(window).width(); if(width>height) { // Landscape $("#mode").text("LANDSCAPE"); } else { // Portrait $("#mode").text("PORTRAIT"); } }, false); </script> </head> <body onorientationchange="updateOrientation();"> <div id="mode">LANDSCAPE</div> </body> </html> 

एक ऐसा तरीका है जिसके द्वारा आप पता लगा सकते हैं कि उपयोगकर्ता ने अपने उपकरण को screen.orientation पोर्ट्रेट मोड में फ़्लिप किया है। screen.orientation

बस कोड का उपयोग करें:

 screen.orientation.onchange = function () { var type = screen.orientation.type; if (type.match(/portrait/)) { alert('Please flip to landscape, to use this app!'); } } 

अब, जब भी उपयोगकर्ता उपयोगकर्ता को फ्लिप करता है तो onchange को निकाल दिया जाएगा और उपयोगकर्ता पोर्ट्रेट मोड का उपयोग करते समय चेतावनी पॉप-अप करेंगे।

 screen.orientation.addEventListener("change", function(e) { console.log(screen.orientation.type + " " + screen.orientation.angle); }, false); 

window.orientation बारे में ध्यान देना एक बात यह है कि यदि आप मोबाइल डिवाइस पर नहीं हैं तो यह undefined होगा। तो ओरिएंटेशन की जांच करने के लिए एक अच्छा काम हो सकता है, जहां x window.orientation है। window.orientation :

 //check for orientation function getOrientation(x){ if (x===undefined){ return 'desktop' } else { var y; x < 0 ? y = 'landscape' : y = 'portrait'; return y; } } 

इसे ऐसा कॉल करें:

 var o = getOrientation(window.orientation); window.addEventListener("orientationchange", function() { o = getOrientation(window.orientation); console.log(o); }, false); 

या आप इसका इस्तेमाल कर सकते हैं ..

 window.addEventListener("orientationchange", function() { if (window.orientation == "90" || window.orientation == "-90") { //Do stuff } }, false); 
 $(window).on("orientationchange",function( event ){ alert(screen.orientation.type) });