移动端杂症

Posted by     小兵兵 on Thursday, May 7, 2020

目录

移动端调试Browsersync

5分钟快速入门

我的Browsersync笔记

安装

npm install -g browser-sync

使用

进入到项目根目录

browser-sync start --server --files "*"

注意:手机调试时,如果访问不了,记得关闭Windows的防火墙|Browsersync提供的ip地址手机如果访问不了,记得切换下到PC端的ip地址

js终端设备检测

移动端调试和终端检测

    <script>
        // 切换Android、iPhone、iPad
        console.log(navigator.userAgent);
        var isMobile = navigator.userAgent.match(/android|iphone|ipod|ipad/i);
        if (isMobile) {
            location.href = 'https://m.imooc.com';
        } else {
            location.href = 'https://www.imooc.com';
        }
        // if (isMobile) {
        //     // 加载移动端资源Zepto
        //     loadMobileResources();
        // } else {
        //     // 加载PC端资源jQuery
        //     loadPCResources();
        // }
    </script>

click事件300ms延迟

What Exactly Is….. The 300ms Click Delay

方法一

fastclick

    <script src="js/fastclick.js"></script>
    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
    </script>

方法二

基于功能检测绑定事件

const Button = document.getElementById("targetButton")

const clickEvent = (function() {
  if ('ontouchstart' in document.documentElement === true)
    return 'touchstart';
  else
    return 'click';
})();

Button.addEventListener(clickEvent, e => {
  console.log("things happened!")
})