Pengoptimuman mudah alih
. penyemak imbas tidak dapat menentukan dengan segera sama ada pengguna benar-benar mahu membuka pautan atau klik dua kali padanya. Oleh itu, penyemak imbas mudah alih menunggu 300 milisaat untuk menentukan sama ada pengguna mengklik skrin sekali lagi. Dengan peningkatan bilangan halaman web responsif, pengguna mempunyai lebih sedikit peluang untuk menggunakan klik dua kali untuk mengezum, dan kelewatan 300ms ini lebih tidak boleh diterima. Pembangun penyemak imbas juga menyediakan penyelesaian yang sepadan. Penyelesaian ini disebut dalam
, termasuk "lumpuhkan penskalaan" dan "lebar=lebar peranti". , atau hanya gunakan penyemak imbas pada Android.
Jadi pada masa ini, penyelesaian yang lebih ringkas dan lebih umum diperlukan Antaranya,
FT Labsialah perpustakaan ringan
FastClick yang dibangunkan khusus untuk menyelesaikan masalah kelewatan klik 300 milisaat pelayar mudah alih. Apabila FastClick mengesan peristiwa hujung sentuh, ia akan mencetuskan acara klik simulasi dengan serta-merta melalui acara tersuai DOM dan menyekat peristiwa klik yang sebenarnya dicetuskan oleh penyemak imbas selepas 300 milisaat. FastClick sangat mudah digunakan Selepas acara pemuatan tetingkap, panggil FastClick.attach() pada <body>.
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );Tatal lantunan pantasSejarah pembangunan tatal lantunan pantas pada penyemak imbas mudah alih:1 Pada zaman awal, penyemak imbas mudah alih tidak menyokong bar skrol untuk elemen bukan badan, jadi iScroll biasanya digunakan
2 . Android 3.0 / iOS menyelesaikan masalah menatal elemen bukan badan, tetapi bar skrol tidak kelihatan Pada masa yang sama, menatal hanya boleh dilakukan dengan 2 jari pada iOS <body> 上调用FastClick.attach() 即可。
.element {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
除了 iScroll 之外，还有一个更加强大的滚动插件 Swiper，支持 3D 和内置滚动条等。
快速回弹滚动
快速回弹滚动在手机浏览器上的发展历史：
1.早期的时候，移动端的浏览器都不支持非 body 元素的滚动条，所以一般都借助 iScroll;
2.Android 3.0 / iOS 解决了非 body 元素的滚动问题，但滚动条不可见，同时 iOS 上只能通过2个手指进行滚动；
3.Android 4.0 解决了滚动条不可见及增加了快速回弹滚动效果，不过随后这个特性又被移除；
4.iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果
如果想要为某个元素拥有 Native 般的滚动效果，可以这样操作：
// 这段代码引用自：https://github.com/binnng/device.js
var WIN = window;
var LOC = WIN["location"];
var NA = WIN.navigator;
var UA = NA.userAgent.toLowerCase();
function test(needle) {
return needle.test(UA);
}
var IsTouch = "ontouchend" in WIN;
var IsAndroid = test(/android|htc/) || /linux/i.test(NA.platform + "");
var IsIPad = !IsAndroid && test(/ipad/);
var IsIPhone = !IsAndroid && test(/ipod|iphone/);
var IsIOS = IsIPad || IsIPhone;
var IsWinPhone = test(/windows phone/);
var IsWebapp = !!NA["standalone"];
var IsXiaoMi = IsAndroid && test(/mi\s+/);
var IsUC = test(/ucbrowser/);
var IsWeixin = test(/micromessenger/);
var IsBaiduBrowser = test(/baidubrowser/);
var IsChrome = !!WIN["chrome"];
var IsBaiduBox = test(/baiduboxapp/);
var IsPC = !IsAndroid && !IsIOS && !IsWinPhone;
var IsHTC = IsAndroid && test(/htc\s+/);
var IsBaiduWallet = test(/baiduwallet/);设备检测
window.scrollYwindow.scrollX
获取滚动条值
PC 端滚动条的值是通过 document.scrollTop 和 document.scrollLeft
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}🎜Pengesanan peranti🎜<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />🎜Dapatkan nilai bar skrol🎜🎜Nilai bar skrol sisi PC adalah melalui
document.scrollTop dan document.scrollLeft Diperolehi, tetapi tiada konsep bar skrol dalam iOS, jadi ia hanya boleh diperoleh melalui windows.scroll, dan ia juga serasi dengan Android. 🎜<!-- 关闭电话号码识别： --> <meta name="format-detection" content="telephone=no" /> <!-- 开启电话功能： --> <a href="tel:123456">123456</a> <!-- 开启短信功能： --> <a href="sms:123456">123456</a>🎜Kosongkan bayang dalam kotak input🎜🎜Pada iOS, kotak input mempunyai bayang dalam secara lalai, tetapi ia tidak boleh dikosongkan menggunakan bayang kotak Jika anda tidak memerlukan bayang, anda boleh melakukan ini: 🎜
<!-- 关闭邮箱地址识别： --> <meta name="format-detection" content="email=no" /> <!-- 开启邮件发送： --> <a mailto:>mobile@gmail.com">mobile@gmail.com</a>
Meta related
Tetingkap halaman secara automatik melaraskan kepada lebar peranti dan melumpuhkan pengguna daripada mengezum halaman
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent -->
Pengecaman nombor telefon
iOS Safari (Android atau penyemak imbas lain tidak) akan mengecam nombor yang kelihatan seperti nombor telefon secara automatik dan akan Ia diproses sebagai pautan nombor telefon, contohnya:
- 7 digit, dalam bentuk: 1234567
- Nombor dengan kurungan dan tanda tambah, dalam bentuk: (+86)123456789
- Garisan bersambung berganda , dalam bentuk: 00 -00-00111
- 11 digit, seperti: 13800138000
Pengenalpastian alamat e-mel
Pada Android (bukan iOS), penyemak imbas akan secara automatik mengecam rentetan yang kelihatan seperti alamat e-mel, tidak kira sama ada anda Tiada pautan e-mel Apabila anda menekan dan menahan rentetan ini, gesaan untuk menghantar e-mel akan muncul.
rrreeeNyatakan gaya bar status teratas Safari pada iOS
rrreee
