Saya menemukan kode tes orientasi ini di bawah mencari bahan referensi JQTouch. Ini berfungsi dengan benar di simulator iOS di Safari seluler tetapi tidak ditangani dengan benar di Phonegap. Proyek saya mengalami masalah yang sama dengan membunuh halaman pengujian ini. Apakah ada cara untuk merasakan perubahan orientasi menggunakan JavaScript di Phonegap?
window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch (orientation) {
case 0:
/* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "portrait");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
break;
case 90:
/* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
/* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
}
Jawaban:
Inilah yang saya lakukan:
Pembaruan Mei 2019:
window.orientation
adalah fitur usang dan tidak didukung oleh sebagian besar peramban menurut MDN . Theorientationchange
event terkait dengan window.orientation dan karena itu sebaiknya tidak digunakan.sumber
window.onorientationchange = function() { setTimeout(functionName, 0); };
Saya menggunakan
window.onresize = function(){ checkOrientation(); }
Dan di checkOrientation Anda dapat menggunakan window.orientation atau pengecekan lebar badan tetapi idenya adalah, "window.onresize" adalah metode peramban yang paling banyak, paling tidak dengan mayoritas peramban seluler dan desktop yang saya miliki. kesempatan untuk menguji dengan.sumber
sumber
resize
acara. Namun, IIRC, kueri ini tidak akan berfungsi dengan benar dengan keyboard.Saya cukup baru untuk iOS dan Phonegap juga, tapi saya bisa melakukan ini dengan menambahkan eventener. Saya melakukan hal yang sama (menggunakan contoh referensi Anda), dan tidak bisa berfungsi. Tapi ini sepertinya berhasil:
Anda mungkin beruntung mencari Group Google PhoneGap untuk istilah "orientasi" .
Salah satu contoh yang saya baca sebagai contoh tentang cara mendeteksi orientasi adalah Pie Guy: ( game , file js ). Ini mirip dengan kode yang Anda kirim, tetapi seperti Anda ... Saya tidak bisa membuatnya berfungsi.
Satu peringatan: eventListener bekerja untuk saya, tapi saya tidak yakin apakah ini pendekatan yang terlalu intensif. Sejauh ini, itulah satu-satunya cara yang berhasil bagi saya, tetapi saya tidak tahu apakah ada cara yang lebih baik dan lebih ramping.
UPDATE memperbaiki kode di atas, sekarang berfungsi
sumber
Saat bekerja dengan
orientationchange
acara tersebut, saya membutuhkan batas waktu untuk mendapatkan dimensi elemen yang benar di halaman, tetapi matchMedia bekerja dengan baik. Kode terakhir saya:sumber
Saya percaya bahwa jawaban yang benar telah diposting dan diterima, namun ada masalah yang saya alami sendiri dan beberapa yang lain telah disebutkan di sini.
Pada platform tertentu, berbagai properti seperti dimensi jendela (
window.innerWidth
,window.innerHeight
) danwindow.orientation
properti tidak akan diperbarui pada saat peristiwa"orientationchange"
telah dipecat. Sering kali, propertiwindow.orientation
hanyaundefined
beberapa milidetik setelah pemecatan"orientationchange"
(setidaknya di Chrome pada iOS).Cara terbaik yang saya temukan untuk menangani masalah ini adalah:
Saya memeriksa untuk melihat apakah orientasinya tidak terdefinisi atau apakah orientasinya sama dengan orientasi terakhir yang terdeteksi. Jika keduanya benar, saya menunggu sepuluh milidetik dan kemudian menguraikan orientasi lagi. Jika orientasi adalah nilai yang tepat, saya memanggil
showXOrientation
fungsi. Jika orientasi tidak valid, saya terus mengulangi fungsi pemeriksaan saya, menunggu sepuluh milidetik setiap kali, sampai valid.Sekarang, saya akan membuat JSFiddle untuk ini, seperti yang biasa saya lakukan, tetapi JSFiddle belum bekerja untuk saya dan bug dukungan saya untuk itu ditutup karena tidak ada orang lain yang melaporkan masalah yang sama. Jika ada orang lain yang ingin mengubahnya menjadi JSFiddle, silakan.
Terima kasih! Saya harap ini membantu!
sumber
inilah yang saya lakukan:
sumber
Meskipun pertanyaannya hanya merujuk pada penggunaan PhoneGap dan iOS, dan meskipun sudah dijawab, saya dapat menambahkan beberapa poin ke pertanyaan yang lebih luas tentang mendeteksi orientasi layar dengan JS pada tahun 2019:
window.orientation
properti sudah ditinggalkan dan tidak didukung oleh browser Android . Ada properti yang lebih baru yang menyediakan informasi lebih lanjut tentang orientasi -screen.orientation
. Tetapi masih eksperimental dan tidak didukung oleh iOS Safari . Jadi untuk mencapai hasil terbaik Anda mungkin perlu menggunakan kombinasi dari dua:const angle = screen.orientation ? screen.orientation.angle : window.orientation
.Seperti @benallansmith sebutkan dalam komentarnya ,
window.onorientationchange
acara dipecat sebelumnyawindow.onresize
, jadi Anda tidak akan mendapatkan dimensi layar yang sebenarnya kecuali Anda menambahkan beberapa penundaan setelah acara orientasi orientasi.Ada Plugin Orientasi Layar Cordova untuk mendukung browser seluler yang lebih lama, tetapi saya percaya tidak perlu menggunakannya saat ini.
Ada juga
screen.onorientationchange
acara, tetapi sudah usang dan tidak boleh digunakan. Ditambahkan hanya untuk kelengkapan jawaban.Dalam use case saya, saya tidak terlalu peduli dengan orientasi yang sebenarnya, tetapi lebih pada lebar dan tinggi sebenarnya dari jendela, yang jelas berubah dengan orientasi. Jadi saya menggunakan
resize
event untuk menghindari berurusan dengan penundaan antaraorientationchange
event dan aktualisasi dimensi jendela:Catatan 1: Saya menggunakan sintaks EcmaScript 6 di sini, pastikan untuk mengkompilasinya ke ES5 jika diperlukan.
Catatan 2:
window.onresize
acara juga dipicu ketika keyboard virtual diaktifkan , tidak hanya ketika orientasi berubah.sumber
Saya menemukan kode ini untuk mendeteksi jika perangkat dalam orientasi lansekap dan dalam kasus ini tambahkan halaman pembuka yang mengatakan "ubah orientasi untuk melihat situs". Ini berfungsi di iOS, android, dan ponsel windows. Saya pikir ini sangat berguna karena cukup elegan dan menghindari untuk menetapkan tampilan lansekap untuk situs seluler. Kode ini bekerja dengan sangat baik. Satu-satunya hal yang tidak sepenuhnya memuaskan adalah bahwa jika seseorang memuat halaman dalam tampilan lanskap halaman splash tidak muncul.
Dan HTML:
<div id="alert" class="hide"> <div id="content">This site is not thought to be viewed in landscape mode, please turn your device </div> </div>
sumber
sumber
Berikut ini bekerja untuk saya:
Saya membutuhkan batas waktu karena nilai
window.orientation
tidak memperbarui segerasumber
Saya membuat aplikasi jQTouch di PhoneGap untuk iPhone. Saya telah berjuang dengan masalah ini selama berhari-hari. Saya telah melihat solusi eventlistener yang disarankan beberapa kali, tetapi tidak bisa berfungsi.
Pada akhirnya saya menemukan solusi yang berbeda. Ini pada dasarnya memeriksa lebar tubuh secara berkala menggunakan settimeout. Jika lebarnya 320 maka orientasinya adalah potret, jika 480 maka lansekap. Kemudian, jika orientasi telah berubah sejak pemeriksaan terakhir, itu akan memecat fungsi barang potret atau fungsi barang lanskap di mana Anda dapat melakukan hal Anda untuk setiap orientasi.
Kode (catatan, saya tahu ada beberapa pengulangan dalam kode, hanya belum repot-repot untuk memangkasnya!):
sumber
onresize
acara yang akan langsung aktif, bukan dalam 500 milidetik 2) Kode ini khusus untuk android, gunakanonorientationchange
sebagai gantinya untuk iPhone 3) Tes jika didukung di browser:"onorientationchange" in window