Belum lama ini, saya melakukan proyek H5 dan perlu melakukan beberapa pemrosesan ketika layar horizontal dan vertikal berubah. Tidak ada keraguan bahwa orientasi perlu digunakan untuk memantau perubahan layar horizontal dan vertikal.
Rencana 1:
// Dengarkan orientasi perubahanwindow.addeventListener ("orientationchange", function (event) {// menilai layar horizontal dan vertikal berdasarkan event.orientation | screen.orientation.angle sama dengan 0 | 180, 90 | -90 derajat}, false);Setelah kode ditambahkan, ada berbagai masalah kompatibilitas. Masalah kompatibilitas terjadi di sini di dua tempat:
orientationchange
event.orientation | screen.orientation.angle
Berikut ini adalah kompatibilitas acara orientasi:
Berikut ini adalah kompatibilitas screen.orientation:
Rencana 2:Rencana di atas tidak berfungsi, sehingga Anda hanya dapat melakukan metode lain. Google dan pelajari bahwa itu dapat dicapai melalui mengubah ukuran (Window.Inner/Outerwidth, Window.Inner/OuterHeight):
window.addeventListener ("ubah ukuran", fungsi (peristiwa) {var orientation = (window.innerwidth> window.innerheight)? "lansekap": "potret"; jika (oritentation === 'potret') {// lakukan sesuatu ...} else {// lakukan sesuatu yang lain ...}, false);Solusi ini pada dasarnya memenuhi kebutuhan sebagian besar proyek, tetapi masih ada beberapa kekurangan:
Selama ukuran jendela berubah, acara mengubah ukuran akan dipicu terus menerus. Anda dapat menggunakan SetTimeout untuk mengoptimalkan
Jika ada beberapa tempat yang perlu memantau layar horizontal dan vertikal, Anda perlu mendaftarkan beberapa windows.addeventListener ("mengubah ukuran", fungsi (peristiwa) {...}). Bisakah Anda memperbaikinya melalui mode langganan dan penerbitan? Hanya mendaftarkan Ukuran Ukuran untuk memantau perubahan layar horizontal dan vertikal, dan menerbitkan pemberitahuan pada objek yang berlangganan selama perubahan horizontal dan vertikal terjadi. Tempat lain yang perlu memantau layar horizontal dan vertikal hanyalah berlangganan.
Kode kuncinya adalah sebagai berikut:
var resizeCb = function () {if (win.innerwidth> win.innerheight) {// inisialisasi penilaian meta.init = 'lansekap'; meta.current = 'lansekap'; } else {meta.init = 'potret'; meta.current = 'potret'; } return function () {if (win.innerwidth> win.innerheight) {if (meta.current! == 'landscape') {meta.current = 'landscape'; event.trigger ('__ orientationchange__', meta); }} else {if (meta.current! == 'potret') {meta.current = 'potret'; event.trigger ('__ orientationchange__', meta); }}}}}}} ();Kode lengkap diklik di sini
Rencana 3:
Namun, saya pribadi berpikir bahwa implementasi window.innerwidth> window.innerheight adalah semacam deteksi semu, yang sedikit tidak dapat diandalkan. Bisakah deteksi dicapai melalui browser? Ini didasarkan pada permintaan media css3@media.
Sebagai berikut kompatibilitas @Media:
Seperti yang ditunjukkan pada gambar di atas, browser seluler mendukung media CSS3.
Ide Implementasi:
Buat gaya CSS tertentu yang mengidentifikasi status layar horizontal dan vertikal
Menyuntikkan kode CSS ke halaman melalui JS
Fungsi Callback Ubah Ukuran Mendapat Status Layar Horizontal dan Vertikal
Di sini saya memilih font-family node <html> </html> sebagai atribut gaya deteksi. Alasannya adalah sebagai berikut:
Pilih <Html> </html> terutama untuk menghindari reflow dan mengecat ulang
Gaya font-family terutama karena keluarga font memiliki karakteristik berikut:
Dengan cara ini, kita dapat menentukan logo spesifik untuk mengidentifikasi status layar horizontal dan vertikal, tetapi logo yang ditentukan perlu ditempatkan di depan font lain, sehingga perubahan font HMTL tidak akan disebabkan.
Kode kuncinya adalah sebagai berikut:
// callback var resizeCb = function () {var hstyle = win.getComputedStyle (html, null), ffstr = hstyle ['font-family'], pstr = "portrait," + ffstr, lstr = "landscape," + ffstr, // splicing csss cssstr = "landscape," + ffstr, // splicing csss cssstr = "landscape," + ffstr,// splicing csss cssstr = "landscape," + ffstr,// splicing csss cssstr = "landscape," + ffstr,// splicing csssssss cssstr =@ori ori {landscape, " + ffstr, // splicing cssssssss .orientation {font-family: ' + pstr +';}} @media (orientasi: lansekap) {.orientation {font-family: ' + lstr +';}} '; // Load Style LoadstleString (CSSSTR); // Tambahkan kelas html.classname = 'orientasi' + html.classname; if (hstyle ['font-family'] === pStr) {// menginisialisasi penilaian meta.init = 'potret'; meta.current = 'potret'; } else {meta.init = 'lansekap'; meta.current = 'lansekap'; } return function () {if (hstyle ['font-family'] === pStr) {if (meta.current! == 'potret') {meta.current = 'potret'; event.trigger ('__ orientationchange__', meta); }} else {if (meta.current! == 'landscape') {meta.current = 'landscape'; event.trigger ('__ orientationchange__', meta); }}}}}} ();Kode lengkap diklik di sini
Hasil tes
Efek potret:
Efek lansekap:
Rencana 4:
Anda dapat memperbaikinya. Saat mendukung orientasi , gunakan orientasi asli. Jika tidak, gunakan solusi 3.
Kode kuncinya adalah sebagai berikut:
// apakah acara orientationchange didukung isorientasi = ('orientasi' di jendela && 'onorientationchange' di jendela); // callbackvar orientationcb = function (e) {if (win.orientation === 180 || win.orientation === 0) {MetA.initation = 'Protret'; meta.current = 'potret'; } if (win.orientation === 90 || win.orientation === -90) {meta.init = 'lansekap'; meta.current = 'lansekap'; } return function () {if (win.orientation === 180 || win.orientation === 0) {meta.current = 'potret'; } if (win.orientation === 90 || win.orientation === -90) {meta.current = 'landscape'; } event.trigger (eventType, meta); }}; var callback = isorientasi? orientationCb (): (function () {resizeCb (); return function () {timer && win.clearTimeout (timer); timer = win.setTimeout (resizeCb, 300);}}) (); // dengarkan win.addeventlistener (isorientation? Evnestipe: ');Kode lengkap diklik di sini
Rencana 5:
Saat ini, solusi di atas semuanya diimplementasikan melalui langganan yang disesuaikan dan menerbitkan mode acara. Di sini, orientationchange dapat disimulasikan berdasarkan mekanisme acara browser. Artinya, perbaiki ketidakcocokan orientasi.
Kode kuncinya adalah sebagai berikut:
var eventType = 'orientationchange'; // memicu orientationchangevar fire = function () {var e; if (document.createEvent) {e = document.createEvent ('htmlevents'); E.Initevent (EventType, True, False); win.dispatchevent (e); } else {e = document.createEventObject (); E.EventType = EventType; if (win [eventType]) {win [eventType] (); } else if (win ['on' + eventType]) {win ['on' + eventType] (); } else {win.fireevent (eventType, e); }}}Kode lengkap diklik di sini
Melalui lima solusi di atas, saya memiliki pemahaman lebih lanjut tentang deteksi layar horizontal dan vertikal pada terminal seluler. Saya hanya tahu mengapa saya menulis tentang beberapa hal sendiri setelah saya mengalaminya sendiri. Saya juga mencatat alasan dalam artikel ini, berharap mereka akan membantu semua orang. Setelah lima solusi berevolusi ke fix perubahan orientasi akhir, Alamat GitHub: https://github.com/zhansingsong/orientationchange-fix
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.