JS dan css melaksanakan pengesanan perubahan dalam orientasi peranti mudah alih dan pertimbangan kemahiran screens_javascript mendatar dan menegak

Kaedah 1: Gunakan peristiwa untuk mencetuskan suis antara skrin mendatar dan menegak telefon

Salin kod Kod adalah seperti berikut:

window.addEventListener("orientationchange", function() {

// Umumkan nilai arah baharu

makluman(tetingkap.orientasi);

}, palsu);

Kaedah 2: Pantau perubahan saiz semula

Salin kod Kod adalah seperti berikut:

window.addEventListener("ubah saiz", function() {

// Dapatkan saiz skrin (lebar dalam/luar, tinggi dalam/luar)

}, palsu);

css menentukan sama ada skrin mendatar atau menegak

Salin kod Kod adalah seperti berikut:

/* potret */

skrin @media dan (orientasi:potret) {

/* gaya khusus potret */

}

/* landskap */

skrin @media dan (orientasi:landskap) {

/* gaya khusus landskap */

}

Kaedah window.matchMedia asli membenarkan pertanyaan media masa nyata. Kita boleh menggunakan pertanyaan media di atas untuk mengetahui sama ada kita berada dalam pandangan tegak atau mendatar:

Salin kod Kod adalah seperti berikut:

var mql = window.matchMedia("(orientasi: potret)");

// Jika ada perlawanan, kami dalam pandangan menegak

jika(mql.matches) {

//arah tegak

makluman("1")

} lain {

//Arah mendatar

makluman("2")

}

//Tambahkan pendengar tukar pertanyaan media

mql.addListener(function(m) {

jika(m.padan) {

//Tukar kepada orientasi tegak

document.getElementById("test").innerHTML="Tukar kepada orientasi tegak";

}

lain {

document.getElementById("test").innerHTML="Tukar kepada orientasi mendatar";

//Tukar kepada orientasi mendatar

}

});