Gunakan media untuk menentukan masalah yang dihadapi dalam lebar layar:
Di iOS, saya bisa melakukannya ketika saya memutar layar, tetapi tidak merespons di Android. Layar horizontal masih menunjukkan gaya layar vertikal saya.
Setelah memeriksa informasi, jika media CSS3 ingin memiliki efek tampilan yang lebih baik di sisi seluler, Anda perlu menambahkan kode ini ke header halaman.
<meta name = "viewport" content = "width = device-width, skala awal = 1.0, skala maksimum = 1.0, skala pengguna = tidak">
Tapi saya tidak bisa menggunakan kode ini. Karena halaman saya diadaptasi. Ukuran font dan ukuran gaya dapat ditampilkan sesuai dengan ukuran layar. Jika saya menambahkan kode ini, adaptasi saya tidak akan berfungsi. Jadi gunakan metode lain
Larutan:
Perangkat seluler menyediakan acara: orientasi.
Acara ini ditambahkan oleh Apple untuk Safari. Sehingga pengembang dapat menentukan kapan pengguna mengganti perangkat dari tampilan lansekap ke mode tampilan potret.
Acara ini akan dipicu saat perangkat berputar.
// dengarkan orientasi perubahanWindow.addeventListener ("orientationchange", function () {// mengumumkan orientasi baru angka (window.orientation);}, false);Selama pengguna mengubah mode tampilan perangkat, acara OrientationChange akan dipicu. Objek acara saat ini tidak berisi informasi berharga.
Karena satu -satunya informasi yang relevan dapat diakses melalui window.orientation
Atribut Orientasi
Ini memiliki tiga nilai: 0,90, -90
0 adalah potret, -90 berarti bahwa perangkat berputar secara horizontal ke mode lansekap di sebelah kanan, sementara 90 berarti bahwa perangkat berputar secara horizontal ke mode lansekap di sebelah kiri.
Ada satu lagi yang 180, yang berarti layar vertikal tetapi merupakan mode layar vertikal terbalik. Tetapi model ini belum didukung.
Seperti yang ditunjukkan pada gambar:
Oleh karena itu, menggabungkan peristiwa orientasi ini dan properti orientasi jendela, lebih mudah bagi kita untuk menentukan apakah perangkat berada di layar horizontal atau vertikal.
(function () {var init = function () {var updateorientation = function () {var orientation = window.orientation; switch (orientasi) {case 90: case -90: orientation = 'landscape'; // di sini adalah horizontal break; default: orientation = 'portrait'; // di sini adalah break lahan;} // orientasi lahan, ht. Layar vertikal //plusportdocument.body.parentnode.setAttribute('class'y orientation); };// acara ini dipanggil untuk setiap rotasi.Oleh karena itu, kelas dapat ditambahkan sesuai dengan keadaan rotasi yang berbeda, sehingga CSS kami dapat ditulis seperti ini
/** Tubuh kinerja menunjukkan merah **/. Portrait Body Div {latar belakang: merah;}/** Tubuh handwidth menunjukkan biru **/. Landscape Body Div {latar belakang: biru;}Cara menulis lain adalah dengan menggunakan kueri media
@media all dan (orientasi: potret) {body div {latar belakang: red;}} @media all dan (orientasi: lansekap) {body div {latar belakang: biru; }}Permintaan media orientasi ini berfungsi pada iOS3.2+ dan Android 2.0+.
Secara relatif, kode semacam ini sedikit lebih ringkas. Dengan JS+CSS di atas, kode semacam ini adalah CSS murni. Ketika perangkat berputar, CSS yang mengubah arah akan dipanggil sesuai dengan arah perangkat diputar.
kesesuaian
Beberapa perangkat tidak menyediakan acara orientasi, tetapi tidak memicu acara mengubah ukuran jendela. Dan jika kueri media tidak mendukung mereka, apa yang harus kita lakukan?
Ini dapat dinilai oleh acara pengukur. Gunakan bagian dalam dan bagian dalam untuk mengambil ukuran layar. Dilihat dengan perbandingan lebar dan tinggi, lebar dan tinggi adalah layar vertikal, dan lebar dan tinggi adalah layar horizontal.
Kodenya adalah sebagai berikut:
(function () {var updateorientation = function () {var orientation = (window.innerwidth> window.innerheight)? 'landscape': 'portrait'; document.body.parentnode.setAttribute ('class', orientasi);}; var init = function () {updateOrtientation ();/listening to the the listening); window.addeventListener ('ubah ukuran', updateorientation, false);}; window.addeventListener ('domContentLoaded', init, false);}) ();Dengan cara ini, kita dapat melihat perubahan gaya yang dibawa oleh rotasi layar di browser.
Kombinasi dari dua metode deteksi adalah sebagai berikut:
(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'; break; default: orientasi = 'potret'; break;}} else {orientasi = (window.innerwidth> window.innerheight)? 'Portrait';} htmlnode.setAttribute ('class', orientation);}; if (supportorientation) {window.addeventListener ('orientationchange', updateArtionation, false);} else {// dengarkan Ubah Ulang window.addeventListener ('ubah ukuran', updateorientation, false);} updateArientation ();}; window.addeventListener ('domContentLoaded', init, false);}) ();Dengan menggunakan metode ini, Anda dapat menyelesaikan deteksi layar seluler horizontal dan vertikal yang mengganggu.