移动端视口适配和解决300毫秒点击延迟

迷南。 2021-07-24 12:52 826阅读 0赞

移动端适配和解决300毫秒点击延迟

方式一:

方式二:

在main.js中使用
    
    1、安装
    	cnpm install fastclick --save
    2、引入
    	import FastClick from 'fastclick'
    3、使用
    	FastClick.attach(document.body)

代码示例:

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        
        <title>React App</title>
        <script
    	src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js">
    </script>
    
    <script>
    	if ('addEventListener' in document) { 
    	document.addEventListener('DOMContentLoaded', function() { 
    	FastClick.attach(document.body);
    	}, false);
    	}
    	if(!window.Promise) { 
    	  document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" '+'>'+'<'+'/'+'script>');
    	}
    </script>
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        
      </body>
    </html>