Bagaimana menilai
Perangkat seluler menyediakan dua objek, satu atribut, dan satu acara:
(1) window.orientation milik atribut objek jendela sebelumnya; Ada tiga nilai: 0 adalah potret, 90 terbalik ke kiri dan berbelok ke mode lansekap, -90 terbalik ke kanan dan beralih ke mode lansekap, dan 180 terakhir adalah apakah perangkat terbalik ke bawah atau vertikal.
(2) OrientationChange adalah peristiwa yang akan memicu acara ini ketika perangkat berputar, seperti acara mengubah ukuran yang digunakan pada PC.
Ketika keduanya digunakan bersama -sama, mudah untuk mendapatkan status layar horizontal dan vertikal perangkat. Kodenya adalah sebagai berikut:
(function () {var init = function () {var updateorientation = function () {var orientation = window.orientation; switch (orientasi) {case 90: case -90: orientation = 'landscape'; break; default: orientation = 'Portrait'; break;} // lakukan sesuatu // misalnya, tambahkan status ke html htm '; break;} // lakukan sesuatu/misalnya, tambahkan status ke html htm'; break; document.parentnode.setAttribute ('kelas', orientasi);Di CSS Anda dapat menulis dengan cara ini:
/** Performance Div Border menunjukkan biru **/. Body Portrait Div {border: 1px solid blue;}/** Performance Div Border menunjukkan kuning **/. Landscape Body Div {Border: 1px Solid Yellow;}Tentu saja, Anda juga dapat menggunakan kueri media (disarankan):
@media all dan (orientasi: potret) {body div {border: 1px solid blue; }}@media semua dan (orientasi: lansekap) {body div {border: 1px solid yellow; }}kesesuaian
Bagaimana cara menangani situasi di mana window.orientation atau orientationchange tidak ada di perangkat? (Umumnya tidak ada, yang lain tidak ada, jika tidak)
Dalam pengembangan awal, mode model perangkat Chrome sering digunakan, tetapi properti ini tidak ada, jadi bagaimana saya bisa mendapatkan nilai ini? Metode sederhananya adalah menilai berdasarkan perbandingan lebar dan tinggi. Jika lebar lebih kecil dari tinggi, itu adalah layar vertikal, dan lebar dan tinggi adalah layar horizontal.
Saya tahu bagaimana mendapatkan hasilnya. Hal berikutnya adalah bagaimana mendengarkan acara pembalikan perangkat. Karena OrientationChange tidak tersedia, gunakan acara mengubah ukuran paling dasar atau gunakan timer untuk mendeteksinya. Silakan lihat kodenya:
(function () {var updateorientation = function () {var orientation = (window.innerwidth> window.innerHeight)? 'lansekap': 'potret'; document.body.parentnode.setAttribute ('class', orientasi);}; var init = function () {update {updatePenation ();//orientasi); Ubah Ulang Window.AddeventListener ('Ubah', Updateorientation, False);Akhirnya, menggabungkan dua metode di atas adalah solusi deteksi lengkap
(function () {var suppuptorientation = (typeof window.orientation === 'number' && typeof window.onorientationChange === 'objek'); var init = function () {var htmlnode = document.body.parentnode, orientasi; var updateorientation = function () {if (ori ori ori ori orientasi) {ori orientasi) {ori orientasi) {ori orientasi) {orientasi) {orientasi) {orientasi) {orientasi) {orientasi) {orientasi) {orientasi) {orientasi) {orientasi) {orientasi) {ori orientasi) {ori orientasi () -90 orientasi = lansekap '; window.addeventlistener ('orientationchange', updateorientation, false);Meringkaskan
Gunakan peristiwa orientationchange untuk memantau apakah perangkat berputar, dan gunakan properti window.orientation untuk menentukan apakah saat ini layar horizontal atau vertikal, untuk melakukan operasi yang berbeda.