移动端优化

    click 的 300ms 延迟响应

    随着响应式网页逐渐增多,用户使用双击缩放机会减少,这 300ms 的延迟就更不可接受了。浏览器开发商也随之提供相应的解决方案。这些方案在 中,被提及的包括「禁用缩放」和「width=device-width」等方案,但这些方案并不完美,需要针对某些版本浏览器,又或仅在 Android 的浏览器上使用。

    所以这时候就需要一个更简单通用的解决方案,其中 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库 就是很好的选择。FastClick 在检测到 touchend 事件的时候,会通过 DOM 自定义事件立即触发一个模拟 click 事件,并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。

    快速回弹滚动

    快速回弹滚动在手机浏览器上的发展历史:

    1. 早期的时候,移动端的浏览器都不支持非 body 元素的滚动条,所以一般都借助 iScroll;
    2. Android 3.0 / iOS 解决了非 body 元素的滚动问题,但滚动条不可见,同时 iOS 上只能通过2个手指进行滚动;
    3. Android 4.0 解决了滚动条不可见及增加了快速回弹滚动效果,不过随后这个特性又被移除;
    4. iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果

    如果想要为某个元素拥有 Native 般的滚动效果,可以这样操作:

    1. .element {
    2. overflow: auto; /* auto | scroll */
    3. -webkit-overflow-scrolling: touch;

    设备检测

    1. // 这段代码引用自:https://github.com/binnng/device.js
    2. var WIN = window;
    3. var LOC = WIN["location"];
    4. var NA = WIN.navigator;
    5. var UA = NA.userAgent.toLowerCase();
    6. function test(needle) {
    7. }
    8. var IsTouch = "ontouchend" in WIN;
    9. var IsAndroid = test(/android|htc/) || /linux/i.test(NA.platform + "");
    10. var IsIPad = !IsAndroid && test(/ipad/);
    11. var IsIPhone = !IsAndroid && test(/ipod|iphone/);
    12. var IsIOS = IsIPad || IsIPhone;
    13. var IsWinPhone = test(/windows phone/);
    14. var IsXiaoMi = IsAndroid && test(/mi\s+/);
    15. var IsUC = test(/ucbrowser/);
    16. var IsWeixin = test(/micromessenger/);
    17. var IsBaiduBrowser = test(/baidubrowser/);
    18. var IsBaiduBox = test(/baiduboxapp/);
    19. var IsPC = !IsAndroid && !IsIOS && !IsWinPhone;
    20. var IsHTC = IsAndroid && test(/htc\s+/);
    21. var IsBaiduWallet = test(/baiduwallet/);

    获取滚动条值

    PC 端滚动条的值是通过 document.scrollTopdocument.scrollLeft 获得,但在 iOS 中并没有滚动条的概念,所以仅能通过 windows.scroll 获取,同时也能兼容 Android 。

    清除输入框内阴影

    在 iOS 上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样操作:

    1. input,
    2. textarea {
    3. border: 0; /* 方法1 */
    4. -webkit-appearance: none; /* 方法2 */
    5. }

    Meta 相关

    页面窗口自动调整到设备宽度,并禁止用户缩放页面
    1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    电话号码识别
    • 7位数字,形如:1234567
    • 带括号及加号的数字,形如:(+86)123456789
    • 11位数字,形如:13800138000
    邮箱地址的识别

    在 Android ( iOS 不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有你没有加上邮箱链接,当你在这个字符串上长按,会弹出发邮件的提示。

    <!-- 关闭邮箱地址识别: -->
    <meta name="format-detection" content="email=no" />
    
    <!-- 开启邮件发送: -->
    <a mailto:>mobile@gmail.com">mobile@gmail.com</a>
    
    指定 iOS 的 safari 顶端状态条的样式