ตรวจหาทิศทางของวิวพอร์ตหากการวางแนวเป็นข้อความแจ้งเตือนการแสดงผลแนวตั้งที่แจ้งให้ผู้ใช้ทราบถึงคำแนะนำ

ฉันกำลังสร้างเว็บไซต์สำหรับอุปกรณ์มือถือโดยเฉพาะ มีหนึ่งหน้าโดยเฉพาะอย่างยิ่งซึ่งดูได้ดีที่สุดในโหมดแนวนอน

มีวิธีการตรวจสอบว่าผู้ใช้ที่เข้าชมหน้านั้นกำลังดูอยู่ในโหมดแนวตั้งหรือไม่และถ้าเป็นเช่นนั้นแสดงข้อความแจ้งให้ผู้ใช้ทราบว่าหน้านั้นดูดีที่สุดในโหมดแนวนอนหรือไม่? หากผู้ใช้กำลังดูอยู่ในโหมดแนวนอนแล้วจะไม่มีข้อความปรากฏขึ้น

โดยพื้นฐานแล้วฉันต้องการให้เว็บไซต์ตรวจจับการวางแนววิวพอร์ตหากการวางแนวเป็นแนวตั้งจากนั้นแสดงข้อความแจ้งเตือนเพื่อแจ้งให้ผู้ใช้ทราบว่าหน้านี้ดูได้ดีที่สุดในโหมดแนวนอน

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

jQuery Mobile มีเหตุการณ์ที่จัดการการเปลี่ยนแปลงของคุณสมบัตินี้ ... หากคุณต้องการเตือนว่ามีคนหมุนเวียนในภายหลัง - orientationchange

นอกจากนี้หลังจาก googling แล้วให้ลองดูwindow.orientation(ซึ่งฉันเชื่อว่าวัดเป็นองศา ... )

คุณยังสามารถใช้window.matchMediaซึ่งฉันใช้และชอบเพราะมันคล้ายกับไวยากรณ์ CSS:

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

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

ทดสอบบน iPad 2

เดวิดวอลช์มีวิธีที่ดีกว่าและตรงประเด็น

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

ระหว่างการเปลี่ยนแปลงเหล่านี้คุณสมบัติ window.orientation อาจเปลี่ยนแปลงได้ ค่า 0 หมายถึงมุมมองแนวตั้ง, -90 หมายถึงอุปกรณ์หมุนเป็นแนวนอนไปทางขวาและ 90 หมายความว่าอุปกรณ์หมุนเป็นแนวนอนไปทางซ้าย

http://davidwalsh.name/orientation-change

คุณสามารถใช้ CSS3:

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

มีหลายวิธีที่จะทำเช่น:

• ตรวจสอบ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!");
}

เพื่อที่จะใช้ความคิดเห็นที่ยอดเยี่ยมทั้งหมดเหล่านี้กับการเข้ารหัสประจำวันของฉันเพื่อความต่อเนื่องระหว่างแอปพลิเคชันทั้งหมดของฉันฉันได้ตัดสินใจที่จะใช้สิ่งต่อไปนี้ทั้งในรหัสมือถือ 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");
  }
}

อย่าลองใช้คำค้นหาหน้าต่างคงที่ (0, 90 ฯลฯ ไม่ได้หมายถึงแนวตั้งแนวนอนและอื่น ๆ ):

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

แม้แต่ใน iOS7 ขึ้นอยู่กับว่าคุณเข้ามาในเบราว์เซอร์ 0 อย่างไร

หลังจากการทดลองบางอย่างฉันพบว่าการหมุนอุปกรณ์ที่ใช้การวางแนวจะทำให้เกิดresizeเหตุการณ์ของหน้าต่างเบราว์เซอร์เสมอ ดังนั้นในตัวจัดการปรับขนาดของคุณเพียงแค่เรียกใช้ฟังก์ชันเช่น:

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

ฉันรวมสองวิธีแก้ปัญหาและทำงานได้ดีสำหรับฉัน

window.addEventListener("orientationchange", function() {                   
    if (window.matchMedia("(orientation: portrait)").matches) {
       alert("PORTRAIT")
     }
    if (window.matchMedia("(orientation: landscape)").matches) {
      alert("LANSCAPE")
     }
}, false);

ฉันไม่เห็นด้วยกับคำตอบที่โหวตมากที่สุด ใช้งานscreenและไม่window

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

เป็นวิธีที่เหมาะสมในการทำ ถ้าคุณคำนวณด้วยwindow.heightคุณจะมีปัญหากับ Android เมื่อคีย์บอร์ดเปิดหน้าต่างจะย่อขนาดลง ดังนั้นใช้หน้าจอแทนหน้าต่าง

screen.orientation.typeเป็นคำตอบที่ดี แต่กับ IE https://caniuse.com/#search=screen.orientation

รับการวางแนว (ตลอดเวลาในรหัส js ของคุณ) ผ่านทาง

window.orientation

เมื่อwindow.orientationผลตอบแทน0หรือ180แล้วคุณอยู่ในโหมดแนวตั้งเมื่อกลับมา90หรือ270แล้วคุณอยู่ในโหมดแนวนอน

CCS เท่านั้น

@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://i.stack.imgur.com/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;
  }
}

ในบางกรณีคุณอาจต้องการเพิ่มโค้ดชิ้นเล็ก ๆ เพื่อโหลดไปยังหน้าหลังจากผู้เยี่ยมชมหมุนอุปกรณ์เพื่อให้การแสดงผล CSS ถูกต้อง:

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

$(window).on("orientationchange",function( event ){
    alert(screen.orientation.type)
});

//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");
    }
}

อีกทางเลือกหนึ่งในการกำหนดทิศทางโดยอิงจากการเปรียบเทียบความกว้าง / ความสูง:

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

คุณใช้ในกิจกรรม "ปรับขนาด":

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

iOS ไม่ได้อัปเดตscreen.width& screen.heightเมื่อการวางแนวเปลี่ยนไป Android ไม่อัปเดต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
    }
}

คุณสามารถตรวจจับการเปลี่ยนแปลงนี้ในทิศทางบน Android เช่นเดียวกับ iOS ด้วยรหัสต่อไปนี้:

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert("the orientation has changed");
}, false);

หากonorientationchangeเหตุการณ์ไม่ได้รับการสนับสนุนกิจกรรมที่ถูกผูกไว้จะเป็นresizeเหตุการณ์

หากคุณมีเบราว์เซอร์รุ่นล่าสุดwindow.orientationอาจไม่ทำงาน ในกรณีที่ใช้รหัสต่อไปนี้เพื่อรับมุม -

var orientation = window.screen.orientation.angle;

นี่ยังเป็นเทคโนโลยีทดลองคุณสามารถตรวจสอบความเข้ากันได้ของเบราว์เซอร์ที่นี่

ขอบคุณ tobyodavies สำหรับแนวทาง

เพื่อให้ได้ข้อความแจ้งเตือนตามการวางแนวของอุปกรณ์มือถือคุณต้องใช้สคริปต์ต่อไปนี้ภายใน function setHeight() {

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

แทนที่จะเป็น 270 ก็สามารถเป็น -90 (ลบ 90)

นี่เป็นการขยายคำตอบก่อนหน้า ทางออกที่ดีที่สุดที่ฉันพบคือการสร้างแอตทริบิวต์ CSS ที่ไร้เดียงสาซึ่งจะปรากฏเฉพาะเมื่อตรงกับการสืบค้นสื่อ CSS3 แล้วทดสอบ JS สำหรับแอตทริบิวต์นั้น

ตัวอย่างเช่นใน CSS คุณมี:

@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;
    }
}

จากนั้นคุณไปที่ JavaScript (ฉันใช้ 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 + "!");
    });
});

ส่วนที่ดีที่สุดของเรื่องนี้ก็คือเมื่อฉันเขียนคำตอบนี้ดูเหมือนว่าจะไม่มีผลกระทบใด ๆ ต่อส่วนต่อประสานเดสก์ท็อปเนื่องจากพวกเขา (โดยทั่วไป) ไม่ (ดูเหมือน) จะผ่านการโต้แย้งเพื่อวางแนวหน้ากระดาษ

นี่เป็นวิธีที่ดีที่สุดที่ฉันพบตามบทความของ David Walsh ( ตรวจจับการเปลี่ยนทิศทางของอุปกรณ์มือถือ )

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

คำอธิบาย:

window.matchMedia ()เป็นวิธีเนทีฟที่ช่วยให้คุณกำหนดกฎสื่อและตรวจสอบความถูกต้องได้ทุกเวลา

ฉันพบว่ามีประโยชน์ในการแนบonchangelistener บนค่าส่งคืนของวิธีนี้ ตัวอย่าง:

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

ฉันใช้ Android Chrome "The Screen Orientation API"

เพื่อดูการวางแนวปัจจุบันเรียก console.log (screen.orientation.type) (และอาจ screen.orientation.angle)

ผลลัพธ์: แนวตั้ง - หลัก | แนวตั้ง - รอง ภูมิทัศน์ปฐมภูมิ ภูมิทัศน์มัธยมศึกษา

ด้านล่างเป็นรหัสของฉันฉันหวังว่าจะเป็นประโยชน์:

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

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

วัตถุหน้าต่างใน JavaScript บนอุปกรณ์ iOS มีคุณสมบัติการวางแนวที่สามารถใช้เพื่อกำหนดการหมุนของอุปกรณ์ ข้อมูลต่อไปนี้แสดงหน้าต่างค่าการควบคุมสำหรับอุปกรณ์ iOS (เช่น iPhone, iPad, iPod) ในทิศทางที่แตกต่างกัน

วิธีนี้ยังใช้กับอุปกรณ์ Android ได้เช่นกัน ฉันตรวจสอบในเบราว์เซอร์ดั้งเดิมของ Android (อินเทอร์เน็ตเบราว์เซอร์) และในเบราว์เซอร์ Chrome แม้จะเป็นเวอร์ชั่นเก่า

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

นี่คือสิ่งที่ฉันใช้

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

<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.onchange = function () {
     var type = screen.orientation.type;
     if (type.match(/portrait/)) {
         alert('Please flip to landscape, to use this app!');
     }
}

ตอนนี้onchangeจะโดนไล่ออกเมื่อผู้ใช้พลิกอุปกรณ์และการเตือนจะปรากฏขึ้นเมื่อผู้ใช้ใช้โหมดแนวตั้ง

สิ่งหนึ่งที่ควรทราบเกี่ยวกับwindow.orientationคือมันจะกลับมาundefinedถ้าคุณไม่ได้อยู่ในอุปกรณ์มือถือ ดังนั้นฟังก์ชั่นที่ดีในการตรวจสอบการวางแนวอาจxเป็น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);