Deteksi orientasi viewport, jika orientasi adalah pesan peringatan tampilan Portrait yang menyarankan pengguna instruksi

Saya sedang membangun situs web khusus untuk perangkat seluler. Ada satu halaman khususnya yang paling baik dilihat dalam mode lansekap.

Apakah ada cara untuk mendeteksi apakah pengguna yang mengunjungi halaman itu melihatnya dalam mode Portrait dan jika demikian, tampilkan pesan yang memberi tahu pengguna bahwa halaman tersebut paling baik dilihat dalam mode lansekap? Jika pengguna sudah melihatnya dalam mode lansekap maka tidak ada pesan yang akan muncul.

Jadi pada dasarnya, saya ingin situs mendeteksi orientasi viewport, jika orientasinya adalah Portrait , lalu menampilkan pesan peringatan yang memberi tahu pengguna bahwa halaman ini paling baik dilihat dalam mode Landscape .

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

jQuery Mobile memiliki acara yang menangani perubahan properti ini ... jika Anda ingin memperingatkan jika seseorang memutar nanti - orientationchange

Juga, setelah beberapa googling, periksa window.orientation(yang saya percaya diukur dalam derajat ...)

Anda juga dapat menggunakan window.matchMedia, yang saya gunakan dan sukai karena sangat mirip dengan sintaks CSS:

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

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

Diuji pada iPad 2.

David Walsh memiliki pendekatan yang lebih baik dan to the point.

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

Selama perubahan ini, properti window.orientation dapat berubah. Nilai 0 berarti tampilan potret, -90 berarti perangkat diputar ke kanan, dan 90 berarti perangkat diputar ke kiri.

http://davidwalsh.name/orientation-change

Anda dapat menggunakan CSS3:

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

Ada beberapa cara untuk melakukannya, misalnya:

• Memeriksa window.orientation nilai
• Bandingkan innerHeightvsinnerWidth

Anda dapat mengadaptasi salah satu metode di bawah ini.

Periksa apakah perangkat dalam mode potret

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

Periksa apakah perangkat dalam mode lansekap

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

Contoh penggunaan

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

Bagaimana cara mendeteksi perubahan orientasi?

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

Saya pikir solusi yang lebih stabil adalah dengan menggunakan layar, bukan jendela, karena bisa jadi keduanya - lanskap atau potret jika Anda akan mengubah ukuran jendela browser Anda di komputer desktop.

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

Untuk menerapkan semua komentar luar biasa ini ke koding harian saya, untuk kesinambungan di antara semua aplikasi saya, saya telah memutuskan untuk menggunakan yang berikut dalam kode jquery dan jquery mobile saya.

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

Jangan coba memperbaiki kueri window.orientation (0, 90 dll tidak berarti potret, lansekap dll):

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

Bahkan di iOS7 tergantung bagaimana Anda masuk ke browser 0 tidak selalu potret

Setelah beberapa percobaan saya menemukan bahwa memutar perangkat yang sadar orientasi akan selalu memicu jendela browser resize . Jadi di pawang ukuran Anda cukup panggil fungsi seperti:

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

Saya menggabungkan dua solusi dan berfungsi dengan baik untuk saya.

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

Saya tidak setuju dengan jawaban yang paling banyak dipilih. Gunakan screendan tidakwindow

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

Apakah cara yang tepat untuk melakukannya. Jika Anda menghitung denganwindow.height , Anda akan mengalami masalah di Android. Saat keyboard terbuka, jendela menyusut. Jadi gunakan layar, bukan jendela.

Ini screen.orientation.typeadalah jawaban yang bagus tetapi dengan IE. https://caniuse.com/#search=screen.orientation

Dapatkan orientasi (kapan saja dalam kode js Anda) via

window.orientation

Saat window.orientationkembali 0atau 180Anda berada dalam mode potret , ketika kembali 90atau 270Anda berada dalam mode lansekap .

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

Dalam beberapa kasus, Anda mungkin ingin menambahkan sepotong kecil kode untuk memuat ulang ke halaman setelah pengunjung memutar perangkat, sehingga CSS diberikan dengan benar:

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

alternatif lain untuk menentukan orientasi, berdasarkan perbandingan lebar / tinggi:

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

Anda menggunakannya pada acara "resize":

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

iOS tidak memperbarui screen.width& screen.heightketika orientasi berubah. Android tidak memperbaruiwindow.orientation ketika itu berubah.

Solusi saya untuk masalah ini:

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

Anda dapat mendeteksi perubahan orientasi ini di Android serta iOS dengan kode berikut:

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

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

Jika onorientationchangeacara tidak didukung, acara terikat akan menjadi resizeacara tersebut.

Jika Anda memiliki browser terbaru, window.orientationmungkin tidak berfungsi. Dalam hal ini gunakan kode berikut untuk mendapatkan sudut -

var orientation = window.screen.orientation.angle;

Ini masih merupakan teknologi eksperimental, Anda dapat memeriksa kompatibilitas browser di sini

Terima kasih tobyodavies untuk memandu jalan.

Untuk mencapai pesan peringatan berdasarkan orientasi perangkat seluler, Anda perlu menerapkan skrip berikut di dalam function setHeight() {

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

Alih-alih 270, itu bisa -90 (minus 90).

Ini memperluas jawaban sebelumnya. Solusi terbaik yang saya temukan adalah membuat atribut CSS tidak berbahaya yang hanya muncul jika permintaan media CSS3 terpenuhi, dan kemudian lakukan uji JS untuk atribut itu.

Jadi misalnya, dalam CSS Anda akan memiliki:

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

Anda kemudian pergi ke JavaScript (Saya menggunakan jQuery untuk funsies). Deklarasi warna mungkin aneh, jadi Anda mungkin ingin menggunakan sesuatu yang lain, tetapi ini adalah metode yang paling mudah saya temukan untuk mengujinya. Anda kemudian dapat menggunakan acara mengubah ukuran untuk mengambil beralih. Gabungkan semuanya untuk:

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

Bagian terbaik dari ini adalah bahwa pada saat saya menulis jawaban ini, tampaknya tidak berpengaruh pada antarmuka desktop, karena mereka (umumnya) tidak (tampaknya) memberikan argumen untuk orientasi ke halaman.

Inilah metode terbaik yang saya temukan, berdasarkan artikel David Walsh ( Deteksi Orientasi Perubahan pada Perangkat Seluler )

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

Penjelasan:

Window.matchMedia () adalah metode asli yang memungkinkan Anda untuk menentukan aturan kueri media dan memeriksa validitasnya kapan saja.

Saya merasa berguna untuk melampirkan onchangependengar pada nilai kembali metode ini. Contoh:

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

Saya menggunakan untuk Android Chrome "The Screen Orientation API"

Untuk melihat panggilan orientasi saat ini console.log (screen.orientation.type) (dan mungkin screen.orientation.angle).

Hasil: portrait-primary | potret-sekunder | landscape-primary | lansekap-sekunder

Di bawah ini adalah kode saya, saya harap ini akan membantu:

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

• Saya menguji hanya untuk Android Chrome - ok

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

Objek jendela dalam JavaScript pada perangkat iOS memiliki properti orientasi yang dapat digunakan untuk menentukan rotasi perangkat. Berikut ini menunjukkan jendela nilai. Orientasi untuk perangkat iOS (mis. IPhone, iPad, iPod) pada orientasi yang berbeda.

Solusi ini juga berfungsi untuk perangkat android. Saya memeriksa di browser asli android (browser Internet) dan di browser Chrome, bahkan di versi yang lama.

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

Inilah yang saya gunakan.

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

    }

}

Penerapan

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>

Ada cara yang dapat Anda deteksi jika pengguna membalik perangkat mereka ke mode potret menggunakan screen.orientation

Cukup gunakan kode di bawah ini:

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

Sekarang, onchangeakan dipecat ketika pengguna membalik perangkat dan peringatan akan muncul ketika pengguna menggunakan mode potret.

Satu hal yang perlu diperhatikan window.orientationadalah bahwa ia akan kembali undefinedjika Anda tidak menggunakan perangkat seluler. Jadi fungsi yang bagus untuk memeriksa orientasi mungkin terlihat seperti ini, di mana xadalah window.orientation:

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

Sebut seperti ini:

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

Atau Anda bisa menggunakan ini ..

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