Di perusahaan, saya berpartisipasi dalam proyek pengembangan campuran APP asli dan h5. Saya bertanggung jawab atas bagian h5 dari proyek tersebut. Saya akan merangkum masalah yang dihadapi dalam proyek tersebut sebagai berikut:
pertanyaan spesifik Pertanyaan 1: Masalah bilah gulir halamanDeskripsi masalah
Halaman web memiliki bilah gulir saat menjelajah di browser PC; namun, saat dibuka di browser seluler, tidak ada bilah gulir.
Larutan
Mengatur lapisan terluar halaman (ketika saya menulis halaman, saya biasanya menulis wadah besar di tag body untuk menyimpan konten halaman) set overflow:auto/scroll; tinggi:100% Tidak mungkin juga)
contoh
<body> <div style=overflow:scroll/auto;> //Konten laman web</div></body>Pertanyaan 2: Penggunaan acara touchstart dan touchend
Deskripsi masalah
Ketika file touch.js diperkenalkan dan peristiwa touchstart dan touchend digunakan untuk mencapai efek interaktif, masalah kegagalan pemicu peristiwa terjadi pada beberapa ponsel [misalnya: ponsel Honor versi rendah]
Larutan
Metode 1: Gunakan deleteEventListener dan addEventListener secara bersamaan
Metode 2: Tambahkan e.preventDefault(); untuk mencegah beberapa ponsel melompat secara default
Metode 3: Jquery menerapkan pengikatan acara
Catatan: Metode 1 dan Metode 2 keduanya merupakan JS asli yang menggunakan addEventListener untuk mengimplementasikan event listening, dan ketika elemen dom menggunakan event touchstart dan touchend, elemen tersebut perlu digunakan bersama dengan event binding atau event listening, jika tidak, bagian js akan memunculkan sebuah event. pengecualian.
kode
//Metode 1: document.getElementById('list5').addEventListener('touchstart',callback, false);document.getElementById('list5').removeEventListener('touchstart',callback, false);document.getElementById(' list5').addEventListener('touchend',panggilan balik, false);document.getElementById('list5').removeEventListener('touchend',callback, false);//Metode 2: document.getElementById('list5').addEventListener('touchstart',function(e){ e. mencegahDefault();}, false);document.getElementById('list5').addEventListener('touchend',function(e){ e.preventDefault();}, false); Pertanyaan 3: Masalah kerusakan tekan lamaRestorasi skenario
Ada halaman daftar XXX. Saat menekan lama item daftar pada halaman daftar (menyentuh teks), akan terjadi crash pada ponsel versi rendah.
Larutan
bagian js: tambahkan e.preventDefault(); ketika acara dipicu untuk mencegah perilaku default
bagian css: tambahkan kode yang melarang penyalinan teks
kode
//js bagian: e.preventDefault(); //bagian css: -webkit-touch-callout: none; //Solusi untuk mogok //Nonaktifkan penyalinan -moz-user-select: none;-khtml-user-select: tidak ada;pilih pengguna: tidak ada;Pertanyaan 4: Masalah dengan 1px di terminal seluler
Deskripsi masalah
Karena ponsel yang berbeda memiliki kepadatan piksel yang berbeda, 1 piksel di CSS tidak sama dengan 1 piksel di perangkat seluler. Dalam proyek tersebut, js dan rem digunakan untuk adaptasi layar seluler, sehingga terjadi situasi 0,5px, mengakibatkan versi ponsel yang lebih rendah tidak dapat menampilkan batas 0,5px.
Larutan
Gunakan css untuk menyelesaikan masalah 1px, dan langsung tulis: border-width:1px; ke elemen dom yang perlu disetel ke 1px;
kode
//Bagian HTML: <div class='class1'></div>//css bagian: .class1{ border: 1px solid #ccc;}//css part/*Masalah dengan tampilan normal 1px pada awal terminal seluler */% border-1px{ tampilan: blok; posisi: absolut; 0; lebar: 100%; konten: ' ';}.border-1px{ posisi: relatif; %batas-1px; bawah: 0; batas-atas: 1px padat #ccc; } &::sebelum{ @extend %batas-1px; webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ .border-1px{ &::setelah{ -webkit-transform: scaleY(0.7); transformasi: scaleY(0.7) } }}@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio); :2){ .border-1px{ &::after{ -webkit-transform: scaleY(0.5); }}/*Masalah tampilan normal 1px di terminal seluler*/ Masalah 5: js tidak dapat mengurai dengan benar nilai parameter url yang berisi tanda =Deskripsi masalah
Dalam proyek, karena nilai parameter permintaan data diperoleh dari alamat url, dan nilai parameter berisi tanda =, nilai parameter tidak dapat diurai dengan benar (ps:js menggunakan tanda = untuk memisahkan parameter url )
Larutan
Transcode url dan kemudian decode [Dalam proyek ini, APP menyediakan alamat url yang ditranskode, dan front-end menggunakan plug-in geturlparams untuk mendapatkan nilai parameter alamat url]
kode
//Dekode = nomor dom.token = decodeURI($.query.get(token)); //Plug-in //Dapatkan nilai tanpa mendekode dom.msgid = $.query.get(msgid);Pertanyaan 6: Mendengarkan acara js asli dan pengikatan acara jquery tidak valid di ios
Deskripsi masalah
Saat menggunakan event listening atau event binding, pemicuan event di iOS tidak valid karena elemen induk memilih elemen isi atau dokumen.
Larutan
Jangan gunakan elemen isi dan dokumen sebagai elemen induk
Pertanyaan 7: Tanggal ditampilkan sebagai NaN di iosDeskripsi masalah
Format tanggal Tanggal memiliki masalah kompatibilitas di ios. Tanggal di ios akan ditampilkan sebagai: NaN
Larutan
Solusi: 26/12/2017 19:36:00 didukung di ios, tetapi format 26-12-2017 19:36:00 tidak didukung. Format terakhir menampilkan Nan di ios (dapat ditampilkan secara normal di Android) )
kode
var time = 26-12-2017 19:36:00;time = time.replace(//-/g, /);//Konversi '-' dalam format waktu ke format '/', kompatibel dengan iOSPertanyaan 8: Ada masalah dengan acara klik di iOS
Deskripsi masalah
Ketika peristiwa klik dipicu oleh klik iOS, modul elemen induk dari delegasi peristiwa akan dipilih [yaitu: karena peristiwa menggelegak dan induk memiliki gaya default], dan akan ada lapisan transparan, misalnya
<ul> <li>Item daftar 1</li> <li>Item daftar 2</li> <li>Item daftar 3</li></ul>
Analisis: Misalnya, ketika pengguna iOS mengklik item daftar 1, UL lapisan induk akan memiliki gaya transparan.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.