diff --git a/docs/assets/css/mobile.css b/docs/assets/css/mobile.css
new file mode 100644
index 000000000..9b9508513
--- /dev/null
+++ b/docs/assets/css/mobile.css
@@ -0,0 +1,14 @@
+html, body {
+    height: 100%;
+}
+
+.container {
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.artplayer-app {
+    width: 100%;
+    height: 100%;
+}
\ No newline at end of file
diff --git a/docs/assets/js/mobile.js b/docs/assets/js/mobile.js
new file mode 100644
index 000000000..9f4031183
--- /dev/null
+++ b/docs/assets/js/mobile.js
@@ -0,0 +1,9 @@
+var vConsole = new VConsole();
+var url = 'https://zhw2590582.github.io/assets-cdn';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    // whitelist: ['iPhone OS 11'],
+    // whitelist: [(ua)=>{ return /iPhone OS 11/gi.test(ua); }],
+    // whitelist: [/iPhone OS 11/gi]
+});
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 2f46cfca7..186bf3331 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -69,5 +69,14 @@
         <script src="./assets/js/consola.js"></script>
         <script src="./uncompiled/artplayer.js"></script>
         <script src="./assets/js/common.js"></script>
+        <script>
+            var _hmt = _hmt || [];
+            (function() {
+              var hm = document.createElement("script");
+              hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
+              var s = document.getElementsByTagName("script")[0]; 
+              s.parentNode.insertBefore(hm, s);
+            })();
+        </script>
     </body>
 </html>
diff --git a/docs/mobile.html b/docs/mobile.html
new file mode 100644
index 000000000..4eb5b712b
--- /dev/null
+++ b/docs/mobile.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>ArtPlayer.js Lab</title>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="keywords" content="artplayer,html5,video,player">
+    <meta name="description" content="ArtPlayer is a modern HTML5 video player">
+    <link rel="shortcut icon" href="./assets/img/favicon.ico">
+    <link rel="stylesheet" href="./assets/css/normalize.css">
+    <link rel="stylesheet" href="./assets/css/mobile.css">
+    <link rel="stylesheet" href="./uncompiled/artplayer.css">    
+</head>
+
+<body>
+    <div class="container">
+        <div class="artplayer-app"></div>
+    </div>
+    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
+    <script src="./uncompiled/artplayer.js"></script>
+    <script src="./assets/js/mobile.js"></script>
+    <script>
+        var _hmt = _hmt || [];
+        (function() {
+          var hm = document.createElement("script");
+          hm.src = "https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d";
+          var s = document.getElementsByTagName("script")[0]; 
+          s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file