Baru-baru ini, saya menulis halaman seluler di tempat kerja. Awalnya bukan apa-apa, tetapi ada persyaratan yang sepertinya sangat aneh yang belum pernah saya temui sebelumnya. Halaman yang saya tulis harus ditempatkan di APP, tetapi APP ada di dalamnya orientasi lanskap., tampilan web yang membuka halaman ini juga dalam layar horizontal (aplikasi versi terbaru terbuka dalam tampilan web layar vertikal), awalnya kami menggunakan tata letak rem, dan tidak ada masalah dalam status layar horizontal, tetapi Pihak A berharap untuk menggunakan layar horizontal di layar horizontal. Paksa halaman ini untuk ditampilkan secara vertikal saat layar terbuka. Jadi ada rangkaian operasi berikut.
Yang pertama adalah menentukan status layar horizontal, menggunakan kode berikut:
function orient() { if(window.orientation == 90 || window.orientation == -90) {//layar horizontal //ipad, layar vertikal iphone; layar horizontal Android //$(body).attr(class, lanskap); //orientasi = 'lanskap'; //alert(ipad, layar vertikal iphone; layar horizontal Android); $(p).text(layar horizontal); == 0 ||.window.orientation == 180) {//Layar vertikal//ipad, layar horizontal iphone; layar vertikal Android// $(body).attr(kelas, potret);// orientasi = 'potret'; //alert(ipad, layar horizontal iphone; layar vertikal Android); $(p).text(layar vertikal); return false; } } //Dipanggil ketika halaman dimuat $(function() { orient(); }); //Dipanggil ketika pengguna mengubah orientasi layar $(window).on('orientationchange', function(e) { orient(); });Ini memantau arah ponsel. Namun, karena APP dibuka dalam mode lanskap, hal ini biasanya tidak dapat dideteksi, dan prasyaratnya adalah ponsel harus mengaktifkan rotasi otomatis. Jadi cara di atas ditinggalkan.
Karena cara pintar sudah ditinggalkan, gunakan cara yang paling murah, yaitu memantau lebar dan tinggi layar. Jika tingginya lebih besar dari lebarnya, kami menetapkan status layar vertikal ponsel secara default. Jika lebarnya lebih besar dari tingginya, kami menganggap ponsel berada dalam kondisi layar horizontal. (Tentu saja ini juga memiliki keterbatasan, tetapi mengingat APP baru telah memecahkan masalah layar horizontal dan vertikal, kami akan melakukannya di sini saja). Kita tidak perlu melakukan apa pun saat layar dalam mode potret. Namun dalam mode lanskap, kita harus memutar halaman 90 derajat. Tanpa basa-basi lagi, mari kita lihat langsung kodenya:
//Gunakan rotasi CSS3 untuk memutar wadah akar 90 derajat berlawanan arah jarum jam untuk memaksa pengguna menampilkannya secara vertikal var rejectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = dokumen.getElementsByTagName(body)[0], $wrapper = dokumen.getElementById(vue), style = if(width <= tinggi) { // Layar horizontal // gaya += lebar: + lebar + px;; // Perhatikan peralihan lebar dan tinggi setelah rotasi // gaya += tinggi: + tinggi + px;;// gaya += -webkit- transformasi: putar(0); transformasi: putar(0);;// gaya += -webkit-transformasi-asal: 0 0;;// gaya += transformasi-asal: 0 0;; ukuran font : + (lebar * 100/1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = ukuran font: + (lebar * 100/1125) + px; = lebar: + tinggi + px;; gaya += tinggi minimum: + lebar + px;; gaya += -webkit-transform: memutar(-90deg); transform: memutar(-90deg);; // Perhatikan penanganan gaya titik tengah rotasi += -webkit-transform-origin: + tinggi / 2 + px + (tinggi / 2) + px;; gaya += asal transformasi: + tinggi / 2 + px + (tinggi / 2) + px;; //gaya += ukuran font: + tinggi * 100 / 1125 + piksel;; //$(html).css({ukuran font:(tinggi * 100/1125),overflow-y:hidden}); var html_doc = dokumen.getElementsByTagName(html)[0]; style.cssText = ukuran font: + tinggi * 100/1125 + piksel + overflow-y:+hidden;+height:+height+px;; gaya += overflow-y: tersembunyi;; add_tab(); $wrapper.style.cssText = gaya; ;fungsi add_tab(){ var clone_tab = $(footer).clone(); $(footer).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:kanan atas}) $(body).append(clone_tab); clone_tab.css({posisi:tetap,kanan:1.77rem,bawah:4rem,kiri :otomatis,atas:0,lebar:11,25rem,tinggi:1,77rem})}Saya yakin kode ini tidak sulit bagi personel front-end, namun ada tiga hal yang perlu diperhatikan.
Poin pertama:
Pada awalnya, saya langsung memutar seluruh html untuk kenyamanan. Saat ini, akan ada masalah, yaitu penempatan elemen dengan posisi tetap di halaman tidak akan berfungsi (<footer> dalam kode ditempatkan sebagai a tab switch.bottom); kita perlu mengubahnya. Karena memutar elemen induk tidak akan berfungsi pada elemen anak, maka kita tidak perlu memutar elemen induk, cukup memutar elemen saudaranya secara langsung. Di sini saya memutar elemen bernama #vue karena semua konten lain di halaman saya ada di div ini. Jadi saya hanya memutar elemennya. Kemudian positioning dapat digunakan saat ini, tetapi gayanya salah, jadi dalam fungsi add_tab saya, saya menyesuaikan ukuran dan gaya elemen ini agar dapat ditampilkan secara normal di sisi kanan layar, yaitu dalam potret mode. , bagian bawah layar.
Poin kedua:
Hal kedua yang perlu diperhatikan adalah karena saya menggunakan rem layout, saya akan mengubah ukuran font html, tapi hati-hati saat ini ketika kita memutarnya, lebarnya menjadi tinggi, dan tingginya menjadi lebar, jadi kita perlu menggunakan height untuk menghitung ukuran font direktori root.
Poin ketiga:
Poin ketiga dicatat dalam program ini. Kita perlu memperhatikan pusat rotasi. Pusat rotasi default adalah titik tengah elemen yang dipilih. Sekarang kita ingin mengubah titik pusat rotasi. Setelah rotasi, Anda juga perlu overflow-y:hidden html. Jika tidak, akan terjadi pengguliran yang tidak perlu.
Dalam hal ini, seluruh halaman pada dasarnya diputar, dan elemen-elemen yang diposisikan tetap di bagian bawah berhasil diposisikan kembali. Untungnya, jendela pop-up yang kita gunakan adalah jendela pop-up layui, dan kemudian kita dapat memutar jendela pop-up tersebut 90 derajat.
ps: Akhirnya saya menemukan masalah yang tidak dapat diselesaikan. Ketika halaman cukup panjang yaitu ketika ada scroll bar, setelah jendela pop-up keluar, jika Anda menggeser layer mask di belakangnya, selanjutnya halaman akan meluncur ke atas. Ini awalnya bisa diatasi. Artikel yang saya tulis di atas diselesaikan dengan menggunakan positioning tetap, tetapi karena rotasi, gagal, jadi tidak ada cara yang baik. Tidak ada masalah dalam mode potret.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.