モバイルの最適化
モバイル デバイスでの 300 ミリ秒のクリック遅延を防ぐ 5 つの方法 で説明されていますが、これらの解決策は完璧ではなく、特定のバージョンのブラウザーを対象とする必要があります。 、または Android のブラウザを使用します。
そのため、現時点では、よりシンプルでより一般的なソリューションが必要です。その中で、FT Labsは、モバイルブラウザの300ミリ秒のクリック遅延問題を解決するために特別に開発された軽量ライブラリFastClickです。 FastClick はタッチエンド イベントを検出すると、DOM カスタム イベントを通じてシミュレートされたクリック イベントを即座にトリガーし、ブラウザーによって実際にトリガーされるクリック イベントを 300 ミリ秒後にブロックします。
FastClick の使い方は非常に簡単です。ウィンドウの読み込みイベントの後、<body> で FastClick.attach() を呼び出します。 window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );<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高速リバウンド スクロール
モバイル ブラウザーでの高速リバウンド スクロールの開発履歴:
1. 初期の頃、モバイル ブラウザーは本文以外のスクロール バーをサポートしていなかったので、一般的に iScroll が使用されました
🎜2。 Android 3.0 / iOS は非本文要素のスクロールの問題を解決しますが、スクロール バーは非表示になり、iOS ではスクロールは 2 本の指でのみ実行できます 🎜🎜3 では、非表示のスクロール バーの問題が解決され、高速な機能が追加されました。リバウンド スクロール効果がありましたが、この機能は削除されました 🎜🎜4. iOS 5.0 以降、スクロール バーは非表示になり、高速リバウンド スクロール効果が追加されました 🎜🎜 要素にネイティブのようなスクロール効果を持たせたい場合は、スクロール効果は次のように操作できます: 🎜input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}🎜デバイス検出🎜<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />🎜スクロールバーの値を取得します🎜🎜PC側のスクロールバーの値は、
document.scrollTopとdocument.scrollLeftを介して取得されます。 取得しますが、iOSにはスクロールバーの概念がないため、windows.scrollからのみ取得でき、Androidにも対応しています。 🎜<!-- 关闭电话号码识别： --> <meta name="format-detection" content="telephone=no" /> <!-- 开启电话功能： --> <a href="tel:123456">123456</a> <!-- 开启短信功能： --> <a href="sms:123456">123456</a>🎜入力ボックスの内側の影をクリアする🎜🎜 iOS では、デフォルトで入力ボックスに内側の影がありますが、box-shadow を使用してクリアすることはできません。影が必要ない場合は、次のようにすることができます。
<!-- 关闭邮箱地址识别： --> <meta name="format-detection" content="email=no" /> <!-- 开启邮件发送： --> <a mailto:>mobile@gmail.com">mobile@gmail.com</a>
メタ関連
ページ ウィンドウはデバイスの幅に自動的に調整され、ユーザーがページをズームできなくなります
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent -->
電話番号認識
iOS Safari (Android またはその他のブラウザーは認識しません) は、電話番号のように見える番号を自動的に認識します電話番号リンクとして処理されます。例:
- 7 桁の形式: 1234567
- 括弧とプラス記号付きの番号、形式: (+86)123456789
- 二重接続線、形式: 00 -00-00111
- 11 桁、例: 13800138000
メール アドレスの識別
Android (iOS ではない) では、ブラウザはメール アドレスのように見える文字列を自動的に認識します。電子メールのリンクがない場合は、この文字列を長押しすると、電子メールを送信するためのプロンプトが表示されます。
rrreeeiOS safariの上部ステータスバーのスタイルを指定します
rrreee
