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 .
orientationchange
acara tersebut. Ini akan menampilkan orientasi lama dan bukan orientasi baru. Jawaban ini bekerja dengan baik dikombinasikan denganorientationchange
acara tersebut.Anda juga dapat menggunakan
window.matchMedia
, yang saya gunakan dan sukai karena sangat mirip dengan sintaks CSS:Diuji pada iPad 2.
sumber
David Walsh memiliki pendekatan yang lebih baik dan to the point.
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
sumber
Anda dapat menggunakan CSS3:
sumber
Ada beberapa cara untuk melakukannya, misalnya:
window.orientation
nilaiinnerHeight
vsinnerWidth
Anda dapat mengadaptasi salah satu metode di bawah ini.
Periksa apakah perangkat dalam mode potret
Periksa apakah perangkat dalam mode lansekap
Contoh penggunaan
Bagaimana cara mendeteksi perubahan orientasi?
sumber
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.
sumber
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.
sumber
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
sumber
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:sumber
Saya menggabungkan dua solusi dan berfungsi dengan baik untuk saya.
sumber
Saya tidak setuju dengan jawaban yang paling banyak dipilih. Gunakan
screen
dan tidakwindow
Apakah cara yang tepat untuk melakukannya. Jika Anda menghitung dengan
window.height
, Anda akan mengalami masalah di Android. Saat keyboard terbuka, jendela menyusut. Jadi gunakan layar, bukan jendela.Ini
screen.orientation.type
adalah jawaban yang bagus tetapi dengan IE. https://caniuse.com/#search=screen.orientationsumber
Dapatkan orientasi (kapan saja dalam kode js Anda) via
Saat
window.orientation
kembali0
atau180
Anda berada dalam mode potret , ketika kembali90
atau270
Anda berada dalam mode lansekap .sumber
Hanya CCS
Dalam beberapa kasus, Anda mungkin ingin menambahkan sepotong kecil kode untuk memuat ulang ke halaman setelah pengunjung memutar perangkat, sehingga CSS diberikan dengan benar:
sumber
sumber
sumber
alternatif lain untuk menentukan orientasi, berdasarkan perbandingan lebar / tinggi:
Anda menggunakannya pada acara "resize":
sumber
iOS tidak memperbarui
screen.width
&screen.height
ketika orientasi berubah. Android tidak memperbaruiwindow.orientation
ketika itu berubah.Solusi saya untuk masalah ini:
Anda dapat mendeteksi perubahan orientasi ini di Android serta iOS dengan kode berikut:
Jika
onorientationchange
acara tidak didukung, acara terikat akan menjadiresize
acara tersebut.sumber
Jika Anda memiliki browser terbaru,
window.orientation
mungkin tidak berfungsi. Dalam hal ini gunakan kode berikut untuk mendapatkan sudut -Ini masih merupakan teknologi eksperimental, Anda dapat memeriksa kompatibilitas browser di sini
sumber
Terima kasih tobyodavies untuk memandu jalan.
Untuk mencapai pesan peringatan berdasarkan orientasi perangkat seluler, Anda perlu menerapkan skrip berikut di dalam
function setHeight() {
sumber
Alih-alih 270, itu bisa -90 (minus 90).
sumber
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:
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:
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.
sumber
Inilah metode terbaik yang saya temukan, berdasarkan artikel David Walsh ( Deteksi Orientasi Perubahan pada Perangkat Seluler )
Penjelasan:
Window.matchMedia () adalah metode asli yang memungkinkan Anda untuk menentukan aturan kueri media dan memeriksa validitasnya kapan saja.
Saya merasa berguna untuk melampirkan
onchange
pendengar pada nilai kembali metode ini. Contoh:sumber
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:
sumber
sumber
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.
sumber
Inilah yang saya gunakan.
Penerapan
sumber
sumber
Ada cara yang dapat Anda deteksi jika pengguna membalik perangkat mereka ke mode potret menggunakan
screen.orientation
Cukup gunakan kode di bawah ini:
Sekarang,
onchange
akan dipecat ketika pengguna membalik perangkat dan peringatan akan muncul ketika pengguna menggunakan mode potret.sumber
Satu hal yang perlu diperhatikan
window.orientation
adalah bahwa ia akan kembaliundefined
jika Anda tidak menggunakan perangkat seluler. Jadi fungsi yang bagus untuk memeriksa orientasi mungkin terlihat seperti ini, di manax
adalahwindow.orientation
:Sebut seperti ini:
sumber
Atau Anda bisa menggunakan ini ..
sumber