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


195

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 .

Jawaban:


274
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 ...)


6
Tidak, sayangnya tidak. Namun, skrip berikut ini berfungsi: if (window.innerHeight> window.innerWidth) {alert ("Silakan lihat dalam lanskap"); }
Dan

8
Saya terlalu rumit masalah. Ini bagus. Sangat sederhana.

76
Pada banyak perangkat, ketika keyboard ditampilkan, makaWidth yang tersedia akan lebih besar dari ketinggian, memberikan orientasi lanskap yang salah.
Pierre

1
Ini tidak berfungsi jika dikombinasikan dengan orientationchangeacara tersebut. Ini akan menampilkan orientasi lama dan bukan orientasi baru. Jawaban ini bekerja dengan baik dikombinasikan dengan orientationchangeacara tersebut.
Donald Duck


163

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.


3
Dukungan untuk fitur itu agak lemah: caniuse.com/#feat=matchmedia
Ashitaka

2
Di Firefox untuk Android berfungsi dengan baik hanya setelah acara DOM siap untuk saya.
Pembalikan

13
Dukungan untuk ini jauh lebih kuat sekarang. Ini tampaknya menjadi jawaban yang jauh lebih kuat sekarang daripada yang diterima.
JonK

2
Waspadalah terhadap hal ini dengan solusi (tautan) ini stackoverflow.com/questions/8883163/…
dzv3

2
Ini jawaban yang benar sekarang. Fitur ini memiliki dukungan penuh untuk semua browser yang relevan.
Telarian

97

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


2
Pada Nexus 10, dan saya tidak tahu tentang tablet Android 10 "lainnya, nilainya mundur. Yaitu 0 dikembalikan ketika perangkat dalam lanskap, bukan potret. Jawaban tobyodavies di atas tampaknya bekerja dengan baik meskipun di semua perangkat saya ' sudah diuji
Nathan

8
Orientasi 0 diberikan untuk menjadi orientasi "alami" perangkat, dan karenanya tergantung pada vendor. Bisa jadi potret atau lanskap ...
Pierre

di ipad di iframe tidak memberi peringatan apa pun
Darius.V

2
ini bukan solusi yang baik untuk mod orientasi deteksi perangkat. Karena mereka mengembalikan nilai tergantung pada orientasi perangkat alami. Contoh pada tampilan potret tablet Samsung 7 mengembalikan 90 tetapi pada nexus 4 untuk potret mereka mengembalikan 0.
Dexter_ns88

3
Pada tautan ini: notes.matthewgifford.com/... Penulis menampilkan berbagai perangkat dari pabrikan yang berbeda memiliki interpretasi yang berbeda tentang apa itu landscape dan portrait. Karenanya berbeda nilai yang dilaporkan, yang tidak bisa Anda andalkan.
Neon Warge

36

Anda dapat menggunakan CSS3:

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

Jawaban terbaik untuk saya, karena Anda tidak perlu pendengar untuk mengubah orientasi. Meskipun saya menggabungkannya dengan modernizr untuk mendeteksi apakah itu perangkat sentuh, karena tidak masuk akal pada layar desktop atau laptop. Masih tidak ok untuk layar seperti itu DENGAN kemampuan sentuh ...
Esger

4
Tidak terkait dengan javascript. OP membutuhkan solusi javascript.
easwee

10
Tidak, dia ingin menampilkan pesan, Anda dapat menggunakan tampilan: tidak ada lalu menampilkan: blokir untuk menampilkan sesuatu.
Thomas Decaux

2
Seperti apa dukungan untuk pemeriksaan CSS ini?
ChrisF

1
Saya tidak tahu, tetapi saya tidak menemukan ponsel yang tidak mendukungnya. Tampaknya juga rusak di Android lama, saat keyboard muncul terkadang permintaan media terpicu.
Thomas Decaux

20

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

10

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

Ini berfungsi di IE 10, Firefox 23 dan Chrome 29 (semua browser desktop).
Jakob Jenkov

1
Semua browser utama mendukungnya. IE 7 juga
artnikpro


@Duncan No. Ini berfungsi di ponsel. Ini adalah metode yang cukup lama dan didukung pada browser safari dan android lama. Ini mungkin tidak terlalu akurat dengan retina tetapi untuk mendeteksi orientasi viewport itu harus bekerja dengan baik
artnikpro

1
@artnikpro Saya mengujinya kemarin dan tampaknya Safari mengembalikan dimensi layar fisik dengan mengabaikan orientasi. Jadi screen.width selalu lebar fisik layar.
Duncan Hoggan

9

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


5

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

1
Lihat di atas mengapa 90 => lansekap bukanlah sesuatu yang dapat Anda andalkan di berbagai perangkat.
ChrisF

5

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

5

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


4

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 .


1
Tidak mengembalikan 270, ia mengembalikan -90.
Felipe Correa

@FelipeCorrea Jawabannya adalah 2 tahun!
Sliq

2
Saya sedang mengklarifikasi untuk membuatnya valid bagi pengunjung baru. Ini membantu saya btw.
Felipe Correa

window.orientation sudah usang
Jonny

4

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

1
Saya tahu saya tidak seharusnya tetapi saya harus mengucapkan terima kasih untuk ini, ini adalah pemecahan yang hebat.
FalsePozitive


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

2

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() { ... });

2

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.


2

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


1

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


1

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.


Sebagai catatan Windows 10 dan Edge mungkin melemparkan kunci pas ke dalam ini - saya belum melakukan pengujian besar pada platform baru, tapi setidaknya pada awalnya, sepertinya itu mungkin memasok data orientasi ke browser. Masih mungkin untuk membangun situs Anda di sekitarnya, tetapi itu pasti sesuatu yang harus diperhatikan.
Josh C

1

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

1

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

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

Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda. Cobalah juga untuk tidak membuat kerumunan kode Anda dengan komentar penjelasan, karena ini mengurangi keterbacaan kode dan penjelasannya!
Selamat tinggal StackExchange

Jawaban ini tidak menyelesaikan masalah dalam pertanyaan awal. Ini menunjukkan cara mencatat perubahan orientasi, tetapi tidak menunjukkan cara menampilkan pesan hanya dalam satu orientasi tertentu.
Julian

1

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

1

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

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

0

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.


0

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

0

Atau Anda bisa menggunakan ini ..

window.addEventListener("orientationchange", function() {
    if (window.orientation == "90" || window.orientation == "-90") {
        //Do stuff
    }
}, false);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.