Dulu, saat saya bekerja di sisi PC, saya juga akan menemui masalah kompatibilitas, tapi sejujurnya, yang ada di pikiran saya hanyalah masalah IE, dan tidak ada yang perlu diperhatikan secara khusus Saya kurang pandai meringkas. Sekarang saya bekerja di sisi seluler (awalnya saya pikir sisi seluler itu sangat mudah, jadi saya tidak menganggapnya serius), jadi, saya salah, saya membayar penghinaan dan kesombongan saya!
Baru-baru ini, saya menemukan beberapa bug kompatibilitas dan menemukan informasi di Internet.
Mari kita bicara tentang area pandang terlebih dahulu
Templat dulu
<meta charset=utf-8><!--Tujuan utamanya adalah untuk memaksa lebar dokumen dan lebar perangkat tetap 1:1, dengan lebar maksimum 1,0, dan untuk melarang penskalaan layar. --><meta content=width=device-width, initial-scale=1.0, maksimum-scale=1.0, user-scalable=no name=viewport><!--Ini juga merupakan label pribadi iPhone, memungkinkan layar penuh menjelajah. --><meta content=yes name=apple-mobile-web-app-capable><!--Label pribadi iphone, gaya bilah status di bagian atas iphone. --><meta content=black name=apple-mobile-web-app-status-bar-style><!--Nonaktifkan identifikasi otomatis nomor sebagai nomor telepon seperti Biru, penambahan gaya pada warna lain juga tidak efektif. --><meta content=telepon=tanpa nama=deteksi-format><!--Nonaktifkan pengenalan email--><meta content=email=tanpa nama=deteksi-format>
Saat menulis gambar latar belakang, yang terbaik adalah menambahkan kiri atas atau 0 0, jika tidak maka akan mudah untuk melompat saat menulis efek gerakan.
Menyalin dan memilih teks dilarang
.el { -webkit-pilih-pengguna: tidak ada; -moz-pilih-pengguna: tidak ada; -khtml-pilih-pengguna: tidak ada;Ada bug dalam pemosisian tetap ponsel Apple. Periksa apakah html dan isi ada overflow-x:hidden;
Tetapkan gaya khusus untuk ponsel dengan ukuran layar berbeda
@media saja layar dan (min-device-width : 320px) dan (max-device-width : 375px){}Dukungan untuk input event keyboard keyup, keydown, dan keypress di iOS kurang baik. Dimungkinkan untuk menggunakan input untuk memantau event keyup keyboard di browser seluler Android browser, keyup tidak segera ditanggapi. Acara hanya dapat ditanggapi setelah penghapusan
Metode: Anda dapat menggunakan acara oninput html5 untuk menggantikan keyup
<tipe input=text id=testInput><script type=text/javascript> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; });< /skrip>Mengatur gaya tombol input di iOS akan diganti dengan gaya default
Solusinya adalah sebagai berikut:
masukan, area teks { perbatasan: 0; -penampilan webkit: tidak ada;}Tata letak fleksibel tidak mendukung atribut flex-wrap:wrap untuk versi Android yang lebih rendah, tetapi sistem ios mendukung atribut line wrap. Tentu saja, jangan gunakan jeda baris dan gunakan metode lain sebagai gantinya.
.box{ display: -webkit-box; /* Sintaks versi lama: Safari, iOS, browser Android, browser WebKit lama. */ display: -moz-box; /* Sintaks versi lama: Firefox (kereta) */ tampilan: -ms-flexbox; /* Sintaks versi campuran: IE 10 */ display: -webkit-flex; /* Sintaks versi baru: Chrome 21+ */ display: flex; 12.1, Firefox 22+ */}Atribut placeholder input akan memposisikan teks ke atas
line-height: (tingginya sama dengan kotak input) --- Solusi PC
line-height: normal --- Solusi seluler
Setelah input type=number, panah atas dan bawah muncul di sisi PC
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: tidak ada !penting; margin: 0;}Aktifkan ponsel Android dan iOS untuk membuka kamera dan memilih fungsi album foto
<input class=js_upFile cover1 type=nama file=coveraccept=image/* capture=camera multiple/>$(function () {//Dapatkan userAgent browser dan ubah menjadi huruf kecil var ua = navigator.userAgent.toLowerCase( ) ; //Tentukan apakah itu ponsel Apple, jika benar var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); jika (isIos) { $(input:file).removeAttr(capture);Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.