Phát hiện hướng xem, nếu định hướng là Thông báo cảnh báo hiển thị chân dung thông báo cho người dùng hướng dẫn

Tôi đang xây dựng một trang web dành riêng cho thiết bị di động. Có một trang đặc biệt được xem tốt nhất ở chế độ ngang.

Có cách nào để phát hiện xem người dùng truy cập trang đó đang xem nó ở chế độ Chân dung hay không và nếu có, hãy hiển thị thông báo cho người dùng biết rằng trang đó được xem tốt nhất ở chế độ ngang? Nếu người dùng đã xem nó ở chế độ ngang thì sẽ không có thông báo nào xuất hiện.

Vì vậy, về cơ bản, tôi muốn trang web phát hiện hướng xem, nếu hướng là Chân dung , sau đó hiển thị thông báo cảnh báo cho người dùng biết rằng trang này được xem tốt nhất ở chế độ Phong cảnh .

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

jQuery Mobile có một sự kiện xử lý sự thay đổi của thuộc tính này ... nếu bạn muốn cảnh báo nếu ai đó xoay vòng sau - orientationchange

Ngoài ra, sau khi một số googling, hãy kiểm tra window.orientation(mà tôi tin rằng được đo bằng độ ...)

Bạn cũng có thể sử dụng window.matchMedia, cái mà tôi sử dụng và thích vì nó gần giống với cú pháp CSS:

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

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

Đã thử nghiệm trên iPad 2.

David Walsh có một cách tiếp cận tốt hơn và đến điểm.

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

Trong những thay đổi này, thuộc tính window.orientation có thể thay đổi. Giá trị 0 có nghĩa là chế độ xem dọc, -90 có nghĩa là thiết bị được xoay ngang sang phải và 90 có nghĩa là thiết bị được xoay ngang sang trái.

http://davidwalsh.name/orientation-change

Bạn có thể sử dụng CSS3:

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

Có một số cách để làm điều đó, ví dụ:

• Kiểm tra window.orientationgiá trị
• So sánh innerHeightvớiinnerWidth

Bạn có thể điều chỉnh một trong các phương pháp dưới đây.

Kiểm tra xem thiết bị có ở chế độ dọc không

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

Kiểm tra xem thiết bị có ở chế độ ngang không

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

Ví dụ sử dụng

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

Làm cách nào để phát hiện sự thay đổi định hướng?

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

Tôi nghĩ giải pháp ổn định hơn là sử dụng màn hình thay vì cửa sổ, bởi vì nó có thể là cả hai - ngang hoặc dọc nếu bạn sẽ thay đổi kích thước cửa sổ trình duyệt của mình trên máy tính để bàn.

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

Để áp dụng tất cả các nhận xét tuyệt vời này vào mã hóa hàng ngày của tôi, vì tính liên tục giữa tất cả các ứng dụng của tôi, tôi đã quyết định sử dụng các mục sau trong cả mã di động jquery và jquery của mình.

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

Đừng thử các truy vấn window.orientation cố định (0, 90, v.v. không có nghĩa là dọc, ngang, v.v.):

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

Ngay cả trên iOS7 tùy thuộc vào cách bạn truy cập vào trình duyệt 0 không phải lúc nào cũng là chân dung

Sau một số thử nghiệm tôi đã thấy rằng việc xoay một thiết bị nhận biết định hướng sẽ luôn kích hoạt resizesự kiện của cửa sổ trình duyệt . Vì vậy, trong trình xử lý thay đổi kích thước của bạn chỉ cần gọi một hàm như:

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

Tôi kết hợp hai giải pháp và nó hoạt động tốt cho tôi.

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

Tôi không đồng ý với câu trả lời được bình chọn nhiều nhất. Sử dụng screenvà khôngwindow

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

Là cách thích hợp để làm điều đó. Nếu bạn tính toán với window.height, bạn sẽ gặp rắc rối trên Android. Khi bàn phím mở, cửa sổ co lại. Vì vậy, sử dụng màn hình thay vì cửa sổ.

Đây screen.orientation.typelà một câu trả lời tốt nhưng với IE. https://caniuse.com/#search=screen.orientation

Nhận định hướng (bất cứ lúc nào trong mã js của bạn) thông qua

window.orientation

Khi window.orientationtrở về 0hoặc 180sau đó bạn ở chế độ dọc , khi trở về 90hoặc 270sau đó bạn ở chế độ ngang .

Chỉ 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;
  }
}

Trong một số trường hợp, bạn có thể muốn thêm một đoạn mã nhỏ để tải lại trang sau khi khách truy cập xoay thiết bị, để CSS được hiển thị đúng:

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

một cách khác để xác định hướng, dựa trên so sánh chiều rộng / chiều cao:

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

Bạn sử dụng nó trong sự kiện "thay đổi kích thước":

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

iOS không cập nhật screen.width& screen.heightkhi định hướng thay đổi. Android không cập nhật window.orientationkhi nó thay đổi.

Giải pháp của tôi cho vấn đề này:

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

Bạn có thể phát hiện sự thay đổi này trong định hướng trên Android cũng như iOS với mã sau:

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

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

Nếu onorientationchangesự kiện không được hỗ trợ, sự kiện bị ràng buộc sẽ là resizesự kiện.

Nếu bạn có các trình duyệt mới nhất window.orientationcó thể không hoạt động. Trong trường hợp đó, sử dụng mã sau để lấy góc -

var orientation = window.screen.orientation.angle;

Đây vẫn là một công nghệ thử nghiệm, bạn có thể kiểm tra tính tương thích của trình duyệt tại đây

Cảm ơn tobyodavies đã hướng dẫn đường đi.

Để đạt được thông báo cảnh báo dựa trên định hướng của thiết bị di động, bạn cần triển khai tập lệnh sau trong phần function setHeight() {

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

Thay vì 270, nó có thể là -90 (trừ 90).

Điều này mở rộng trên một câu trả lời trước. Giải pháp tốt nhất mà tôi đã tìm thấy là tạo một thuộc tính CSS vô hại chỉ xuất hiện nếu một truy vấn phương tiện CSS3 được đáp ứng, và sau đó có bài kiểm tra JS cho thuộc tính đó.

Vì vậy, ví dụ, trong CSS bạn có:

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

Sau đó, bạn truy cập JavaScript (Tôi đang sử dụng jQuery cho các cuộc vui). Khai báo màu có thể là lạ, vì vậy bạn có thể muốn sử dụng một cái gì đó khác, nhưng đây là phương pháp hoàn hảo nhất mà tôi đã tìm thấy để thử nghiệm nó. Sau đó, bạn có thể chỉ cần sử dụng sự kiện thay đổi kích thước để chọn chuyển đổi. Đặt tất cả lại với nhau cho:

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

Phần tốt nhất của điều này là khi tôi viết câu trả lời này, nó dường như không có bất kỳ ảnh hưởng nào đến giao diện máy tính để bàn, vì chúng (nói chung) không (dường như) chuyển bất kỳ đối số nào để định hướng cho trang.

Đây là phương pháp tốt nhất tôi tìm thấy, dựa trên bài viết của David Walsh ( Phát hiện thay đổi định hướng trên thiết bị di động )

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

Giải trình:

Window.matchMedia () là một phương thức riêng cho phép bạn xác định quy tắc truy vấn phương tiện và kiểm tra tính hợp lệ của nó tại bất kỳ thời điểm nào.

Tôi thấy hữu ích khi đính kèm một onchangengười nghe vào giá trị trả về của phương thức này. Thí dụ:

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

Tôi đã sử dụng cho Android Chrome "API định hướng màn hình"

Để xem hướng hiện tại, hãy gọi console.log (screen.orientation.type) (và có thể screen.orientation.angle).

Kết quả: chân dung chính | chân dung phụ | tiểu cảnh cảnh quan phụ

Dưới đây là mã của tôi, tôi hy vọng nó sẽ hữu ích:

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

• Tôi chỉ thử nghiệm cho Android Chrome - ok

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

Đối tượng cửa sổ trong JavaScript trên thiết bị iOS có thuộc tính định hướng có thể được sử dụng để xác định góc quay của thiết bị. Phần sau đây hiển thị các giá trị window.orientation cho các thiết bị iOS (ví dụ: iPhone, iPad, iPod) ở các hướng khác nhau.

Giải pháp này cũng hoạt động cho các thiết bị Android là tốt. Tôi đã kiểm tra trình duyệt gốc Android (trình duyệt Internet) và trong trình duyệt Chrome, ngay cả trong các phiên bản cũ của nó.

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

Đây là những gì tôi sử dụng.

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

    }

}

Thực hiện

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>

Có một cách mà bạn có thể phát hiện nếu người dùng lật thiết bị của họ sang chế độ dọc bằng cách sử dụng screen.orientation

Chỉ cần sử dụng mã dưới đây:

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

Bây giờ, onchangesẽ bị kích hoạt khi người dùng lật thiết bị và cảnh báo sẽ bật lên khi người dùng sử dụng chế độ dọc.

Một điều cần lưu ý window.orientationlà nó sẽ trở lại undefinednếu bạn không sử dụng thiết bị di động. Vì vậy, một chức năng tốt để kiểm tra hướng có thể trông như thế này, đó xlà window.orientation:

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

Gọi nó như vậy:

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

Hoặc bạn chỉ có thể sử dụng này ..

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);