1. Saat melihat gambar latar belakang dengan browser Android, beberapa perangkat akan kabur.
Sangat jelas pada PC dengan proporsi gambar yang sama, tetapi sangat buram di telepon. Apa alasannya?
Setelah penelitian, itu adalah devicepixelratio yang menyebabkan masalah. Karena resolusi ponsel terlalu kecil, jika halaman web ditampilkan sesuai dengan resolusi, kata -katanya akan sangat kecil. Jadi Apple awalnya menampilkan resolusi iPhone 4 960640 di halaman web, jadi DevicePixelRatio = 2. Sekarang Android cukup berantakan, dengan 1,5, 2 dan 3.
Jika Anda ingin gambar ditampilkan lebih jelas di ponsel Anda, Anda harus menggunakan gambar latar belakang 2x alih -alih tag IMG (umumnya, 2 kali). Misalnya, lebar dan tinggi div adalah 100100, gambar latar belakang harus tahun 200200, dan kemudian ukuran latar belakang: berisi;, sehingga gambar yang ditampilkan akan lebih jelas.
Kode bisa sebagai berikut:
Latar Belakang: URL (../ Gambar/Ikon/All.png) No-Repeat Center Center; -webkit-Background-Size: 50px 50px; Ukuran Latar Belakang: 50px 50px; Tampilan: blok inline; Lebar: 100%; Tinggi: 50px;
Atau tentukan ukuran latar belakang: berisi; Baik, tolong cobalah!
2. Pemuatan gambar
Jika Anda menghadapi masalah pemuatan gambar yang lambat, dalam hal ini, pengembangan ponsel umumnya menggunakan metode kanvas untuk memuat:
Untuk API kanvas tertentu, silakan merujuk ke: http://javascript.ruanyifeng.com/htmlapi/canvas.html
Berikut adalah contoh kanvas:
<li> <Canvas> </Canvas> </li>
JS memuat gambar dan li secara dinamis. Sebanyak 17 gambar diberikan!
var total = 17; var zwin = $ (jendela); var render = function () {var padding = 2; var winwidth = zwin.width (); var picwidth = math.floor ((winwidth-padding*3)/4); var tmpl = ''; untuk (var i = 1; i <= totla; i ++) {var p = padding; var imgsrc = 'img/'+i+'. jpg'; if (i%4 == 1) {p = 0; } tmpl+= '<li> <canvas id = "cvs _'+i+'"> </canvas> </li>'; var imageObj = gambar baru (); ImageObj.index = i; ImageObj.onload = function () {var cvs = $ ('#cvs _'+this.index) [0] .getContext ('2d'); cvs.width = this.width; cvs.height = this.height; cvs.drawimage (ini, 0,0); } imageObj.src = imgsrc; }} render ();3. Jika situs web seluler tidak perlu kompatibel dengan IE browser, kami biasanya menggunakan ZeptoJs . Metode Acara Touch BuiltoJS BuiltoJS, silakan merujuk ke acara http://zeptojs.com/#touch
Saya melihat versi baru Zeptio API, yang sudah mendukung IE10 atau di atas browser, dan Anda dapat memilih untuk menggunakan Zeptojs!
4. Cegah halaman web untuk memperbesar dan menyusut di ponsel . Ini adalah poin paling mendasar. Yang paling diketahui pengembang situs web seluler adalah mengatur Viewport di Meta.
Juga, kami telah melihat pernyataan berikut di beberapa situs web seluler:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// wapforum // dtd xhtml seluler 1.0 // en" "http://www.wapforum.org/dtd/xhtml-mobile10.dtd">
Cara mengatur DTD adalah xhtml. Jika halaman kami menggunakan HTML5, Anda dapat secara langsung mendeklarasikan <! Doctype html> tanpa mengatur DTD.
Gunakan viewport untuk mencegah halaman memperbesar. Biasanya mengatur skala pengguna ke 0 untuk mematikan penskalaan pengguna tampilan halaman.
<meta name = "viewport" content = "user-scalable = 0" />
Tetapi untuk kompatibilitas yang lebih baik, kami akan menggunakan pengaturan viewport lengkap.
Salinan kode adalah sebagai berikut:
<meta name = "viewport" content = "width = device-width, skala awal = 1.0, skala maksimum = 1.0, scalable pengguna = 0" />
Tentu saja, skala pengguna = 0, dan beberapa orang juga menulis skala pengguna = tidak, keduanya baik-baik saja.5. Apple-Mobile-Web-Appable
Apple-Mobile-Web-Appable adalah untuk mengatur apakah aplikasi web berjalan dalam mode layar penuh.
tata bahasa:
<meta name = "Apple-Mobile-Web-Appable" Content = "Yes">
menjelaskan:
Jika konten diatur ke ya, aplikasi web akan berjalan dalam mode layar penuh, jika tidak, itu tidak akan. Nilai default konten tidak, menunjukkan tampilan normal. Anda dapat menggunakan jendela properti read-only.navigator.StandAlone untuk menentukan apakah halaman web ditampilkan dalam mode layar penuh.
6. Format-deteksi
Format-deteksi memungkinkan atau menonaktifkan nomor telepon di halaman pengenalan otomatis.
tata bahasa:
<meta name = "format-detection" content = "telepon = tidak">
menjelaskan:
Secara default, perangkat secara otomatis mengenali string apa pun yang mungkin nomor telepon. Mengatur telepon = Tidak dapat menonaktifkan fitur ini.
7. HTML5 memanggil fungsi panggilan Android atau iOS
HTML5 menyediakan tag yang secara otomatis memanggil panggilan, cukup tambahkan Tel: di href tag a.
sebagai berikut:
<a href = "tel: 4008106999.1034"> 400-810-6999 Beralih ke 1034 </a>
Hubungi ponsel Anda secara langsung sebagai berikut
<a href = "tel: 15677776767"> klik untuk menghubungi 15677776767 </a>
8. Fungsi penentuan posisi html5gps
Untuk detailnya, silakan lihat: //www.vevb.com/post/html5_gps_getcurrentposition
9. Saat menarik batang gulir ke atas dan ke bawah, macet atau lambat
body {-webkit-overflow-scrolling: touch; meluap-luap menggulung: sentuh;}Android3+ dan iOS5+ Dukungan CSS3 Atribut baru adalah gulungan overflow
10. Menyalin atau Memilih Teks dilarang
Elemen {-webkit-user-select: tidak ada; -Moz-pengguna-select: tidak ada; -khtml-user-select: tidak ada; Pilih Pengguna: Tidak Ada;}Selesaikan teks halaman yang dapat dipilih untuk perangkat seluler (tergantung pada kebutuhan produk)
11. Tekan dan tahan halaman untuk waktu yang lama dan macet
elemen {-webkit-touch-callout: none;}12. Bayangan default di kotak input di bawah iPhone dan iPad
Elemen {-webkit -appearance: tidak ada; }13. Topeng abu -abu tembus cahaya muncul saat menyentuh elemen di bawah iOS dan Android
Elemen {-webkit-tap-highlight-color: rgba (255.255.255,0)}Mengatur nilai alfa ke 0 dapat menghapus topeng abu -abu tembus cahaya. Catatan: Nilai properti transparan tidak valid di bawah Android.
Artikel berikut memiliki pengantar rinci, alamat: http://www.vevb.com/post/phone_web_ysk
14. Pemrosesan Kompatibilitas Aktif adalah kelas semu: aktif tidak valid
Metode 1: Tambahkan OnTouchstart ke tubuh
<body ontouchstart = "">
Metode 2: JS mengikat acara Touchstart atau Touchend untuk didokumentasikan
<tyle> a {color: #000;} a: Active {color: #fff;} </tyle> <a herf = foo> bar </a> <script> document.addeventListener ('touchstart', function () {}, false); </script>15. Definisi Animasi 3D Mengaktifkan Akselerasi Perangkat Keras
Elemen {-webkit -transform: translate3d (0, 0, 0) Transform: translate3d (0, 0, 0);}Catatan: Deformasi 3D akan mengkonsumsi lebih banyak memori dan daya
16. 1px Border of Retina Screen
Elemen {perbatasan-lebar: tipis;}17. Pemrosesan Webkit Mask yang Kompatibel
Beberapa ponsel kelas bawah tidak mendukung CSS3 Mask, dan dapat diturunkan secara opsional.
Misalnya, Anda dapat menggunakan penilaian JS untuk merujuk ke berbagai kelas:
if ('webkitmask' di document.documentelement.style) {alert (mask dukungan ');} else {waspada (tidak didukung topeng');}18. Masalah penyesuaian ukuran font saat memutar layar
html, tubuh, bentuk, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust: 100%;}19. Layar Flash Transisi
/Tetapkan bagaimana elemen tertanam diterjemahkan dalam ruang 3D: cagar alam 3D/-webkit-transform-style: preserve-3d;/Tetapkan apakah bagian belakang elemen yang dikonversi terlihat ketika menghadap pengguna: hide/-webkit-backface-visibilitas: tersembunyi;
20. Bug Pojok Bulat
Beberapa ponsel android telah gagal
Latar belakang-klip: Padding-box;
21. Warna latar belakang bilah status teratas
<meta name = "Apple-Mobile-Web-App-Status-Bar-Style" Content = "Black" />
menjelaskan:
Kecuali jika Anda pertama kali menggunakan Apple-Mobile-Web-Appable untuk menentukan mode layar penuh, tag meta ini tidak akan berfungsi.
Jika konten diatur ke default, bilah status akan ditampilkan secara normal. Jika diatur ke Blank, bilah status akan memiliki latar belakang hitam. Jika disetel ke blank-transplucent, bilah status tampak hitam tembus cahaya. Jika diatur ke default atau kosong, halaman ditampilkan di bawah bilah status, yaitu, bilah status menempati bagian atas dan halaman menempati bagian bawah. Keduanya tidak diblokir oleh pihak lain atau diblokir. Jika diatur ke Blank-Translucent, halaman mengisi layar, di mana bagian atas halaman ditutupi oleh bilah status (mencakup ketinggian halaman sebesar 20px, sedangkan layar retina untuk iPhone4 dan ITouch4 adalah 40px). Nilai default default.
22. Siapkan cache
<meta http-equiv = "cache-control" content = "no-cache" />
Halaman seluler biasanya di -cache setelah beban pertama, dan setiap penyegaran menggunakan cache alih -alih mengirimkan kembali permintaan ke server. Jika Anda tidak ingin menggunakan cache, Anda dapat mengatur tidak ada cache.
23. Ikon Desktop
<tautan rel = "apple-touch-icon" href = "sentuh-icon-iphone.png" /> <tautan rel = "apple-touch-icon" ukuran = "76x76" href = "Touch-icon-IPAD.PNG" /> <link rel = "Apple-Touch-icon" SIZE = "120X120" TOURE = "TOCK-TOUCH-ICON" SIZE = "120X120" TOCTE = "TOCTE" TOCH-ICON-ICON "SIZE =" 120X120 " /> <tautan rel = "apple-touch-icon" ukuran = "152x152" href = "Touch-icon-ipad-retina.png" />
Tentukan ikon desktop yang berbeda untuk perangkat yang berbeda di bawah iOS. Jika tidak ditentukan, gunakan tangkapan layar saat ini sebagai ikon.
Metode penulisan di atas mungkin dianggap memiliki gloss default. Metode pengaturan berikut dapat menghilangkan efek gloss dan mengembalikan efek gambar desain!
<tautan rel = "apple-touch-icon-precomposed" href = "Touch-icon-iphone.png" />
Ukuran gambar dapat diatur ke 5757 (px) atau retina dapat diatur ke 114114 (px), dan ukuran iPad adalah 72*72 (px)
24. Mulai layar
<tautan rel = "apple-touch-startup-image" href = "start.png"/>
Gambar yang ditampilkan saat halaman mulai memuat di bawah iOS adalah untuk menghindari layar putih saat memuat.
Ukuran yang berbeda dapat ditentukan melalui matriks:
<!-iPhone-> <link href = "apple-touch-startup-image-320x460.png" media = "(device-width: 320px)" rel = "apple-touch-startup-image" /> <!-iPhone retina-> <link href = "Apple-Touch-startup-image-640.phx (Link =" Apple-Touch-startup-image-640.phx. (-webkit-device-pixel-ratio: 2) "rel =" apple-touch-startup-image " /> <!-iPhone 5-> <tautan rel =" Apple-Touch-startup-image "Media =" (-Webkit: 320px) dan (Device-height: 568px) dan (-webkit-deviors) dan (Device-height: 568px) dan (-webkit-deviice-rixel) dan (device-height: 568px) dan (-webkit-deviice-rixel href = "Apple-Touch-Startup-Image-640x1096.png"> <!-Potret iPad-> <link href = "Apple-Touch-Startup-Image-768x1004.png" Media = "(Device-Width: 768px) dan (orientasi: PROTRAT)" Rel = "-Device-WIDTH: 768PX) dan (orientasi: PROTRAIT)" REL = "" LANDTH-T-TEPP: 768px) dan (orientasi: PROTRAT) "PROTRAT)" REL = " href = "Apple-Touch-Startup-Image-748x1024.png" Media = "(Perangkat-lebar: 768px) dan (orientasi: lansekap)" rel = "Apple-Touch-Startup-Image" /> <!-Porsi Retina IPad-> <Link href = "Apple-Touch-Startup-Image-10." 1536px) dan (orientasi: potret) dan (-webkit-device-pixel-ratio: 2) "rel =" apple-touch-startup-image " /> <!-lansekap retina iPad-> <tautan href =" Apple-Touch-Startup-Image-496x2048.png "Media =" Media = "Media =" Media = "Media =" Media = "Media =" Media = "Media =" Media = " (-webkit-device-pixel-ratio: 2) "rel =" apple-touch-startup-image " />
25. Browser Private and lainnya
Atribut berikut belum diterapkan dalam proyek, Anda dapat menulis demo untuk menguji yang berikut!
QQ Browser Private
Mode layar penuh
<meta name = "x5-fullscreen" konten = "true">
Layar vertikal paksa
<meta name = "x5-orientasi" konten = "potret">
Layar horizontal paksa
<meta name = "x5-orientasi" konten = "lansekap">
Mode Aplikasi
<meta name = "x5-page-mode" content = "app">
UC Browser Private
Mode layar penuh
<meta name = "full-screen" content = "yes">
Layar vertikal paksa
<meta name = "orientasi layar" konten = "potret">
Layar horizontal paksa
<meta name = "orientasi layar" konten = "lansekap">
Mode Aplikasi
<meta name = "browserMode" content = "application">
lainnya
Dioptimalkan untuk perangkat genggam, terutama untuk beberapa browser lama yang tidak mengenali viewports, seperti BlackBerry
<meta name = "handheldfriendly" content = "true">
Browser lama Microsoft
<meta name = "MobileOptimized" Content = "320">
Windows Phone Click tanpa sorotan
<meta name = "msApplication-tap-highlight" content = "no">
26. Keyup, Keydown, dan Dukungan Tekan Key di iOS tidak terlalu bagus
Masalahnya adalah ini: Saat menggunakan input pencarian untuk pencarian fuzzy, masukkan kata kunci di keyboard, dan kueri melalui latar belakang AJAX, lalu kembalikan data, lalu tandai kata kunci untuk data yang dikembalikan merah. Tidak apa -apa menggunakan input untuk memantau acara keyboard keyup di browser seluler Android, tetapi berubah menjadi merah sangat lambat di browser seluler iOS. Setelah dimasukkan menggunakan metode input, acara KeyUp tidak segera sesuai. Itu hanya bisa sesuai setelah penghapusan!
Larutan:
Anda dapat menggunakan acara OnInput HTML5 untuk mengganti keyup
<input type = "text" id = "testInput"> <script type = "text/javascript"> document.geteLementById ('testInput'). addeventListener ('input', function (e) {var value = e.target.value;}); </skrip>Maka Anda akan mencapai efek seperti keyup!
27. Masalah pengaturan input situs web H5 untuk mengetik = angka
Mengatur jenis input halaman web H5 ke angka umumnya menyebabkan tiga masalah. Satu masalah adalah atribut maxlength tidak mudah digunakan. Yang lainnya adalah bahwa ketika formulir diserahkan, itu dibulatkan secara default. Ketiga, beberapa ponsel Android memiliki masalah gaya.
Setelah masalah diselesaikan, saya saat ini menggunakan JS. sebagai berikut
<input type = "number" onInput = "checkTextLength (this, 10)"> function checkTextLength (obj, length) {if (obj.value.length> panjang) {obj.value = obj.value.substr (0, panjang); }}Pertanyaan 2 adalah karena default pengiriman formulir untuk bentuk verifikasi, langkah default adalah 1, dan atribut langkah perlu ditetapkan. Jika 2 tempat desimal dipertahankan, metode penulisan adalah sebagai berikut:
<input type = "number" step = "0,01" />
Mengenai langkah, saya akan memberikan pengantar singkat di sini. Dalam tipe input = angka, panah atas dan bawah umumnya akan dihasilkan secara otomatis. Mengklik panah atas akan menambahkan langkah secara default. Mengklik panah bawah akan mengurangi langkah secara default. Langkah default dalam angka adalah 1. Yaitu, langkah = 0,01, Anda dapat mengizinkan input 2 tempat desimal, dan klik panah atas dan bawah untuk meningkatkan 0,01 dan mengurangi masing -masing 0,01.
Jika langkah dan min digunakan bersama, nilainya harus antara min dan maks.
Lihat contoh berikut:
<input type = "number" step = "3.1" min = "1" />
Angka apa yang dapat dimasukkan dalam kotak input?
Pertama, jika nilai minimum adalah 1, Anda dapat memasukkan 1.0, yang kedua adalah masuk (1+3.1), yaitu 4.1, dan seterusnya, masing -masing klik pada panah atas dan bawah akan meningkat atau berkurang sebesar 3.1, dan masukkan nomor lain akan tidak valid. Ini adalah pengantar singkat untuk langkah.
Pertanyaan 3: Hapus gaya input default
input [type = number] {-moz-appeargeance: textField;} input [type = number] ::-webkit-inner-button, input [type = number] ::-WebKit-Outter-spin-button {-webkit-APPREANCE: NOST; margin: 0;}28. Gaya tombol Input Pengaturan IOS akan ditimpa dengan gaya default
Solusinya adalah sebagai berikut:
input, textarea {border: 0; -webkit-kemean: tidak ada; }Atur gaya default ke None
29. Input Surat Keyboard IOS, Kapitalisasi Surat Awal Default
Solusi: Atur properti berikut
<input type = "text" autocapitalize = "off" />
30. Pilih drop-down Pilih Setel kanan perataan
Pengaturan adalah sebagai berikut:
Pilih opsi {arah: rtl;}31. Deformasi kemiringan dilakukan melalui transformasi, rotasi rotasi akan menyebabkan Jagging
Itu dapat diatur sebagai berikut:
-webkit-transform: rotate (-4deg) skew (10deg) translatez (0); Transform: Rotate (-4deg) Skew (10deg) TranslateZ (0); Garis besar: 1px RGBA solid (255.255.255,0)
32. Seluler Klik 300ms Delay
300ms masih dapat diterima, tetapi kita harus menyelesaikan masalah yang disebabkan oleh 300ms. 300ms menyebabkan pengalaman pengguna tidak terlalu baik. Untuk mengatasi masalah ini, kami biasanya menggunakan acara tap untuk mengganti acara klik di sisi seluler.
Dua Js direkomendasikan, satu adalah fastclick dan yang lainnya adalah tap.js
Untuk keterlambatan 300ms, silakan lihat: http://thx.github.io/mobile/300ms-click-delay/
33. Masalah penetrasi titik akhir
Contohnya adalah sebagai berikut:
<Div ID = "Haorooms"> Tes Acara NOD </div> <a href = "www.vevb.com"> www.vevb.com </a>
Div adalah topeng penentuan posisi absolut, dan indeks z lebih tinggi dari a. Tag A adalah tautan di halaman, kami mengikat acara tap ke div:
$ ('#harooms'). on ('tap', function () {$ ('#harooms'). hide ();});Ketika kita mengklik lapisan topeng, div menghilang secara normal, tetapi ketika kita mengklik lapisan topeng pada tag A, kita menemukan bahwa tautan A dipicu, yang disebut peristiwa point-through.
alasan:
TouchStart mendahului Touchend sebelum klik. Artinya, pemicu klik tertunda, dan kali ini sekitar 300 ms. Dengan kata lain, topeng itu disembunyikan setelah pemicu keran kami. Pada saat ini, klik belum dipicu. Setelah 300ms, klik kami memicu tautan di bawah ini karena topeng disembunyikan.
menyelesaikan:
(1) Cobalah menggunakan acara Touch untuk mengganti acara klik. Misalnya, gunakan acara Touchend (disarankan).
(2) Gunakan FastClick, https://github.com/ftlabs/fastclick
(3) Gunakan preventdefault untuk memblokir klik tag
(4) Tunda waktu tertentu (300ms+) untuk menangani acara (tidak disarankan)
(5) Di atas umumnya dapat diselesaikan, tetapi jika itu benar -benar tidak berhasil, itu akan digantikan oleh insiden klik.
Berikut ini adalah acara Touchend, sebagai berikut:
$ ("#harooms"). on ("touchend", function (event) {event.preventDefault ();});34. Hilangkan nomor garpu di IE10
input: -ms-clear {display: none;}35. Mengenai optimalisasi font pada iOS dan OS X (akan ada font yang tidak konsisten pada layar horizontal dan vertikal, dll.)
Ukuran font akan diatur ulang ketika browser iOS ditata. Mengatur teks-ukuran-menyesuaikan siapa pun yang dapat menyelesaikan masalah di iOS, tetapi fungsi penskalaan font safari pada versi desktop akan tidak valid, jadi solusi terbaik adalah mengubah ukuran teks-disesuaikan menjadi 100%.
-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%; teks-ukuran-menyesuaikan: 100%;
36. Tentang sistem iOS, saat memasuki bahasa Inggris dengan metode input Cina, ruang keenam dapat muncul di antara huruf-huruf.
Dapat dihapus secara teratur
this.value = this.value.replace (// u2006/g, '');
37. Masalah Kegagalan Autoplay Audio HTML5 Seluler
Ini bukan bug. Karena secara otomatis bermain audio atau video di halaman web akan menyebabkan beberapa masalah atau konsumsi lalu lintas yang tidak perlu bagi pengguna, sistem Apple dan Android biasanya melarang pemutaran otomatis dan memicu pemutaran menggunakan JS. Itu harus dipicu oleh pengguna sebelum dapat dimainkan.
Solusi: Sentuh Pertama Pengguna TouchStart, Trigger Playback dan Pause (audio mulai memuat, dan kemudian gunakan JS untuk mengoperasikannya lagi).
Kode Solusi:
document.addeventListener ('touchstart', function () {document.geteLementsbyTagname ('audio') [0] .play (); document.geteLementsbyTagname ('audio') [0] .paSeAe ();});38. Masalah placeholder tidak didukung pada tanggal input HTML5 seluler
Saya tidak berpikir ada solusi yang baik untuk ini, gunakan metode berikut
Salinan kode adalah sebagai berikut:
<input placeholder = "date" type = "text" onfocus = "(this.type = 'date')" id = "date">
Beberapa browser mungkin perlu mengklik dua kali!39. Beberapa model memiliki input dengan jenis pencarian, dan metode modifikasi gaya tombol tutupnya disediakan.
Beberapa model kontrol input pencarian akan datang dengan tombol dekat (elemen semu), dan biasanya agar dapat kompatibel dengan semua browser, kami akan mengimplementasikannya sendiri. Saat ini, metode untuk menghapus tombol tutup asli
#Search ::-webkit-search-cancel-tombol {display: none; }Jika Anda ingin menggunakan tombol tutup asli dan ingin menyesuaikan dengan gaya desain, Anda dapat memodifikasi gaya elemen semu ini.
40. Dorong opsi untuk memperluas
Metode Zepto:
$ (sltelement) .trrgger ("mousedown");Metode JS asli:
function showdropDown (slTeLement) {var event; Event = Document.CreateEvent ('MouseEvents'); event.initmouseEvent ('mousedown', true, true, window); sltelement.dispatchevent (event);};