diff --git a/admin/common-js.php b/admin/common-js.php
index 7ee34a36..05f3060b 100644
--- a/admin/common-js.php
+++ b/admin/common-js.php
@@ -76,16 +76,33 @@
 
 
             // 导航菜单 tab 聚焦时展开下拉菜单
-            (function () {
-                $('#typecho-nav-list').find('.parent a').focus(function() {
-                    $('#typecho-nav-list').find('.child').hide();
-                    $(this).parents('.root').find('.child').show();
-                });
-                $('.operate').find('a').focus(function() {
-                    $('#typecho-nav-list').find('.child').hide();
-                });
-            })();
+            const menuBar = $('.menu-bar').click(function () {
+                const nav = $(this).next('#typecho-nav-list');
+                if (!$(this).toggleClass('focus').hasClass('focus')) {
+                    nav.removeClass('expanded noexpanded');
+                }
+            });
 
+            $('.main, .typecho-foot').on('click touchstart', function () {
+                if (menuBar.hasClass('focus')) {
+                    menuBar.trigger('click');
+                }
+            });
+
+            $('#typecho-nav-list ul.root').each(function () {
+                const ul = $(this), nav = ul.parent();
+
+                ul.on('click touchend', '.parent a', function (e) {
+                    nav.removeClass('noexpanded').addClass('expanded');
+                    if ($(window).width() < 576 && e.type == 'click') {
+                        return false;
+                    }
+                }).find('.child')
+                .append($('<li class="return"><a><?php _e('返回'); ?></a></li>').click(function () {
+                    nav.removeClass('expanded').addClass('noexpanded');
+                    return false;
+                }));
+            });
 
             if ($('.typecho-login').length == 0) {
                 $('a').each(function () {
diff --git a/admin/css/style.css b/admin/css/style.css
index 5799ae97..07cd285e 100644
--- a/admin/css/style.css
+++ b/admin/css/style.css
@@ -138,11 +138,11 @@ select { border: 1px solid #CCC; height: 28px; }
 /** 后台头部导航 */
 .typecho-head-nav { padding: 0 10px; background: #292D33; position: relative; }
 
-.typecho-head-nav a { padding: 0 20px; height: 36px; line-height: 36px; color: #BBB; }
+.typecho-head-nav a, .typecho-head-nav button.menu-bar { padding: 0 20px; height: 36px; line-height: 36px; color: #BBB; }
 
-.typecho-head-nav a:focus, .typecho-head-nav a:hover { color: #FFF; text-decoration: none; }
+.typecho-head-nav a:focus, .typecho-head-nav a:hover, .typecho-head-nav button.menu-bar:focus, .typecho-head-nav button.menu-bar:hover { color: #FFF; text-decoration: none; }
 
-.typecho-head-nav a.menu-bar { display: none; border-right: 1px solid #383D45; }
+.typecho-head-nav button.menu-bar { display: none; }
 
 .typecho-head-nav #typecho-nav-list { float: left; }
 
@@ -154,6 +154,8 @@ select { border: 1px solid #CCC; height: 28px; }
 
 .typecho-head-nav #typecho-nav-list > ul .child { position: absolute; list-style: none; top: 36px; display: none; margin: 0; padding: 0; min-width: 160px; max-width: 240px; background: #202328; z-index: 250; }
 
+.typecho-head-nav #typecho-nav-list > ul .child li.return { display: none; }
+
 .typecho-head-nav #typecho-nav-list > ul .child li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
 
 .typecho-head-nav #typecho-nav-list > ul .child li a:hover, .typecho-head-nav #typecho-nav-list > ul .child li a:focus { background: #292D33; }
@@ -172,16 +174,25 @@ select { border: 1px solid #CCC; height: 28px; }
 
 .typecho-head-nav .operate a:hover { background-color: #202328; }
 
-@media (max-width: 575px) { .typecho-head-nav { padding: 0; }
+@media (max-width: 575px) { @keyframes out { from { left: 0%; }
+    to { left: -100%; } }
+  @keyframes in { from { left: -100%; }
+    to { left: 0%; } }
+  .typecho-head-nav { padding: 0; position: fixed; bottom: 0; width: 100%; z-index: 10; }
   .typecho-head-nav #typecho-nav-list { display: none; }
   .typecho-head-nav .operate a:last-child { border-right-width: 0; }
-  .typecho-head-nav a.menu-bar { display: inline-block; }
-  .typecho-head-nav a.menu-bar.focus { color: #FFF; }
-  .typecho-head-nav a.menu-bar.focus + #typecho-nav-list { display: block; float: none; position: absolute; top: 36px; width: 240px; }
-  .typecho-head-nav a.menu-bar.focus + #typecho-nav-list > ul { float: none; }
-  .typecho-head-nav a.menu-bar.focus + #typecho-nav-list > ul:first-child { border: none; }
-  .typecho-head-nav a.menu-bar.focus + #typecho-nav-list > ul .parent a { display: block; pointer-events: none; }
-  .typecho-head-nav a.menu-bar.focus + #typecho-nav-list > ul .child { position: static; } }
+  .typecho-head-nav button.menu-bar { display: inline-block; border: none; background: #292D33; border-right: 1px solid #383D45; }
+  .typecho-head-nav button.menu-bar.focus { color: #FFF; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list { display: block; float: none; position: absolute; bottom: 36px; width: 100%; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul { float: none; border-bottom: 1px solid #383D45; position: static; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul:first-child { border-left: none; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .parent a { display: block; border: none; background: #202328; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .child { position: absolute; bottom: 0; left: 100%; top: auto; z-index: 20; width: 100%; max-width: 100%; min-width: auto; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .child li { border-bottom: 1px solid #383D45; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .child li.return { display: block; text-align: center; font-size: 12px; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list > ul .child li.return a { color: #777; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list.expanded { animation: out .15s ease-out forwards; }
+  .typecho-head-nav button.menu-bar.focus + #typecho-nav-list.noexpanded { animation: in .15s ease-out forwards; } }
 
 /** 注脚 */
 .typecho-foot { padding: 4em 0 3em; color: #999; line-height: 1.8; text-align: center; }
@@ -223,7 +234,7 @@ select { border: 1px solid #CCC; height: 28px; }
 
 .front-archive { padding-left: 1.5em; }
 
-.profile-avatar { border: 1px dashed #D9D9D6; max-width: 100%; }
+.profile-avatar { width: 220px; height: 220px; border-radius: 10px; }
 
 /** 增加配置面板内部的错误样式 by 70 */
 /**  安装样式 @author mingcheng @date   2008-09-06 */
@@ -317,9 +328,8 @@ select { border: 1px solid #CCC; height: 28px; }
 
 .typecho-list-operate input[type="checkbox"] { vertical-align: text-top; }
 
-.typecho-list-operate .operate { float: left; }
-
-.typecho-list-operate .search { float: right; }
+@media (min-width: 576px) { .typecho-list-operate .operate { float: left; }
+  .typecho-list-operate .search { float: right; } }
 
 .typecho-list-operate span.operate-delete, a.operate-delete, .typecho-list-operate span.operate-button-delete, a.operate-button-delete { color: #B94A48; }
 
@@ -422,7 +432,7 @@ a.operate-reply { color: #545c30; }
 
 .typecho-post-area .submit .right button { margin-left: 5px; }
 
-.typecho-post-area .right { float: right; padding-left: 24px; }
+.typecho-post-area .right { float: right; }
 
 .typecho-post-area .left { float: left; }
 
@@ -531,6 +541,11 @@ a.operate-reply { color: #545c30; }
 /* 拖动排序 */
 .tDnD_whileDrag { background-color: #FFFBCC; }
 
+@media (max-width: 575px) { .typecho-list-operate .search { margin-top: 10px; }
+  .typecho-table-wrap { padding: 10px; margin: 0 -10px; }
+  .typecho-option-submit button[type="submit"] { width: 100%; }
+  .profile-avatar { width: 110px; height: 110px; } }
+
 /** 导入扩展样式 */
 /** icons */
 .icons-sprite, .icons-icon-delete, .icons-icon-edit, .icons-icon-exlink, .icons-icon-upload-active, .icons-icon-upload, .icons-mime-application, .icons-mime-archive, .icons-mime-audio, .icons-mime-html, .icons-mime-image, .icons-mime-office, .icons-mime-script, .icons-mime-text, .icons-mime-unknow, .icons-mime-video, .i-edit, .i-delete, .i-upload, .i-upload-active, .i-exlink, .mime-office, .mime-text, .mime-image, .mime-html, .mime-archive, .mime-application, .mime-audio, .mime-script, .mime-video, .mime-unknow { background-image: url("../img/icons.png?_=01c3ae1"); background-repeat: no-repeat; }
@@ -856,6 +871,8 @@ a.operate-reply { color: #545c30; }
 
 .preview #btn-cancel-preview { display: inline-block; }
 
+@media (max-width: 575px) { #wmd-spacer2, #wmd-olist-button, #wmd-ulist-button, #wmd-heading-button, #wmd-hr-button, #wmd-more-button, #wmd-spacer3, #wmd-undo-button, #wmd-redo-button, #wmd-spacer4, #wmd-fullscreen-button, #wmd-exit-fullscreen-button, #btn-fullscreen-upload { display: none; } }
+
 /** Jquery Timepicker */
 #ui-datepicker-div { display: none; margin-top: -1px; padding: 10px; border: 1px solid #D9D9D6; background: #FFF; }
 
diff --git a/admin/header.php b/admin/header.php
index b3ed6d97..1b5062ca 100644
--- a/admin/header.php
+++ b/admin/header.php
@@ -20,7 +20,7 @@ $header = Typecho_Plugin::factory('admin/header.php')->header($header);
         <meta charset="<?php $options->charset(); ?>">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="renderer" content="webkit">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
         <title><?php _e('%s - %s - Powered by Typecho', $menu->title, $options->title); ?></title>
         <meta name="robots" content="noindex, nofollow">
         <?php echo $header; ?>
diff --git a/admin/menu.php b/admin/menu.php
index 94bfc703..357e8d25 100644
--- a/admin/menu.php
+++ b/admin/menu.php
@@ -1,6 +1,6 @@
 <?php if(!defined('__TYPECHO_ADMIN__')) exit; ?>
 <div class="typecho-head-nav clearfix" role="navigation">
-    <a class="menu-bar" href="###" onclick="$(this).toggleClass('focus'); return false;"><?php _e('菜单'); ?></a>
+    <button class="menu-bar"><?php _e('菜单'); ?></button>
     <nav id="typecho-nav-list">
         <?php $menu->output(); ?>
     </nav>
diff --git a/admin/src/scss/_header.scss b/admin/src/scss/_header.scss
index 97b3acc6..d66ed72b 100644
--- a/admin/src/scss/_header.scss
+++ b/admin/src/scss/_header.scss
@@ -5,6 +5,7 @@
 $border-nav: 1px solid #383D45;
 $color-nav-bg: #292D33;
 $color-nav-text-normal: #BBB;
+$color-nav-text-mute: #777;
 $color-nav-text-hover: #FFF;
 $color-nav-btn-hover: #202328;
 $color-nav-child-focus: #6DA1BB;
@@ -14,7 +15,7 @@ $color-nav-child-focus: #6DA1BB;
   background: $color-nav-bg;
   position: relative;
 
-  a {
+  a, button.menu-bar {
     padding: 0 20px;
     height: 36px;
     line-height: 36px;
@@ -25,11 +26,10 @@ $color-nav-child-focus: #6DA1BB;
       color: $color-nav-text-hover;
       text-decoration: none;
     }
+  }
 
-    &.menu-bar {
-      display: none;
-      border-right: $border-nav;
-    }
+  button.menu-bar {
+    display: none;
   }
 
   #typecho-nav-list {
@@ -67,6 +67,10 @@ $color-nav-child-focus: #6DA1BB;
         z-index: 250;
 
         li {
+          &.return {
+            display: none;
+          }
+
           a {
             overflow: hidden;
             text-overflow : ellipsis;
@@ -118,49 +122,98 @@ $color-nav-child-focus: #6DA1BB;
 }
 
 @media (max-width: $screen-phone - 1px) {
-    .typecho-head-nav {
-        padding: 0;
+  @keyframes out {
+    from {left: 0%;}
+    to {left: -100%;}
+  }
 
-        #typecho-nav-list {
-          display: none;
-        }
+  @keyframes in {
+    from {left: -100%;}
+    to {left: 0%;}
+  }
 
-        .operate {
-          a:last-child {
-            border-right-width: 0;
-          }
-        }
+  .typecho-head-nav {
+    padding: 0;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 10;
 
-        a.menu-bar {
-          display: inline-block;
-          
-          &.focus {
-            color: $color-nav-text-hover;
+    #typecho-nav-list {
+      display: none;
+    }
+
+    .operate {
+      a:last-child {
+        border-right-width: 0;
+      }
+    }
+
+    button.menu-bar {
+      display: inline-block;
+      border: none;
+      background: $color-nav-bg;
+      border-right: $border-nav;
       
-            & + #typecho-nav-list {
-              display: block;
-              float: none;
+      &.focus {
+        color: $color-nav-text-hover;
+  
+        & + #typecho-nav-list {
+          display: block;
+          float: none;
+          position: absolute;
+          bottom: 36px;
+          width: 100%;
+          
+          & > ul {
+            float: none;
+            border-bottom: $border-nav;
+            position: static;
+
+            &:first-child {
+              border-left: none;
+            }
+            .parent {
+              a {
+                display: block;
+                border: none;
+                background: $color-nav-btn-hover;
+              }
+            }
+            .child {
               position: absolute;
-              top: 36px;
-              width: 240px;
-              
-              & > ul {
-                float: none;
-                &:first-child {
-                  border: none;
-                }
-                .parent {
+              bottom: 0;
+              left: 100%;
+              top: auto;
+              z-index: 20;
+              width: 100%;
+              max-width: 100%;
+              min-width: auto;
+
+              li {
+                border-bottom: $border-nav;
+                &.return {
+                  display: block;
+                  text-align: center;
+                  font-size: 12px;
+
                   a {
-                    display: block;
-                    pointer-events: none;
+                    color: $color-nav-text-mute;
                   }
                 }
-                .child {
-                  position: static;
-                }
               }
             }
           }
+
+          &.expanded {
+            animation: out .15s ease-out forwards;
+          }
+
+          &.noexpanded {
+            animation: in .15s ease-out forwards;
+          }
         }
+      }
     }
+  }
 }
diff --git a/admin/src/scss/components/_editor.scss b/admin/src/scss/components/_editor.scss
index 15a1ced6..3805b907 100644
--- a/admin/src/scss/components/_editor.scss
+++ b/admin/src/scss/components/_editor.scss
@@ -78,21 +78,21 @@
       height: 20px;
     }
 
-    @include editor-button(bold)
-    @include editor-button(italic)
-    @include editor-button(link)
-    @include editor-button(quote)
-    @include editor-button(code)
-    @include editor-button(image)
-    @include editor-button(olist)
-    @include editor-button(ulist)
-    @include editor-button(heading)
-    @include editor-button(hr)
-    @include editor-button(more)
-    @include editor-button(undo)
-    @include editor-button(redo)
-    @include editor-button(fullscreen)
-    @include editor-button(exit-fullscreen)
+    @include editor-button(bold);
+    @include editor-button(italic);
+    @include editor-button(link);
+    @include editor-button(quote);
+    @include editor-button(code);
+    @include editor-button(image);
+    @include editor-button(olist);
+    @include editor-button(ulist);
+    @include editor-button(heading);
+    @include editor-button(hr);
+    @include editor-button(more);
+    @include editor-button(undo);
+    @include editor-button(redo);
+    @include editor-button(fullscreen);
+    @include editor-button(exit-fullscreen);
   }
 }
 
@@ -308,3 +308,21 @@
   .preview-loading { background-image: url(../img/ajax-loader.gif); background-position: center; background-repeat: no-repeat }
   #btn-cancel-preview { display: inline-block }
 }
+
+@media (max-width: $screen-phone - 1px) {
+  #wmd-spacer2,
+  #wmd-olist-button,
+  #wmd-ulist-button,
+  #wmd-heading-button,
+  #wmd-hr-button,
+  #wmd-more-button,
+  #wmd-spacer3,
+  #wmd-undo-button,
+  #wmd-redo-button,
+  #wmd-spacer4,
+  #wmd-fullscreen-button,
+  #wmd-exit-fullscreen-button,
+  #btn-fullscreen-upload {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/admin/src/scss/style.scss b/admin/src/scss/style.scss
index 008e479e..c95d9f73 100644
--- a/admin/src/scss/style.scss
+++ b/admin/src/scss/style.scss
@@ -171,8 +171,9 @@ a.button:hover, a.balloon-button:hover {
 }
 
 .profile-avatar {
-  border: 1px dashed #D9D9D6;
-  max-width: 100%;
+  width: 220px;
+  height: 220px;
+  border-radius: 10px;
 }
 
 /** 增加配置面板内部的错误样式 by 70 */
@@ -435,12 +436,15 @@ a.button:hover, a.balloon-button:hover {
   vertical-align: text-top;
 }
 
-.typecho-list-operate .operate {
-  float: left;
-}
-
-.typecho-list-operate .search {
-  float: right;
+@media (min-width: $screen-phone) {
+  .typecho-list-operate {
+    .operate {
+      float: left;
+    }
+    .search {
+      float: right;
+    }
+  }
 }
 
 .typecho-list-operate span.operate-delete, a.operate-delete,
@@ -708,7 +712,6 @@ a.operate-reply {
 
 .typecho-post-area .right {
   float: right;
-  padding-left: 24px;
 }
 
 .typecho-post-area .left {
@@ -949,6 +952,29 @@ background: #FFF1A8;
   background-color: #FFFBCC;
 }
 
+@media (max-width: $screen-phone - 1px) {
+  .typecho-list-operate {
+    .search {
+      margin-top: 10px;
+    }
+  }
+
+  .typecho-table-wrap {
+    padding: 10px;
+    margin: 0 -10px;
+  }
+
+  .typecho-option-submit {
+    button[type="submit"] {
+      width: 100%;
+    }
+  }
+
+  .profile-avatar {
+    width: 110px;
+    height: 110px;
+  }
+}
 
 /**
 * 导入扩展样式
diff --git a/admin/theme-editor.php b/admin/theme-editor.php
index a042d00b..e8b8208f 100644
--- a/admin/theme-editor.php
+++ b/admin/theme-editor.php
@@ -31,7 +31,7 @@ Typecho_Widget::widget('Widget_Themes_Files')->to($files);
                     <form method="post" name="theme" id="theme" action="<?php $security->index('/action/themes-edit'); ?>">
                         <label for="content" class="sr-only"><?php _e('编辑源码'); ?></label>
                         <textarea name="content" id="content" class="w-100 mono" <?php if(!$files->currentIsWriteable()): ?>readonly<?php endif; ?>><?php echo $files->currentContent(); ?></textarea>
-                        <p class="submit">
+                        <p class="typecho-option typecho-option-submit">
                             <?php if($files->currentIsWriteable()): ?>
                             <input type="hidden" name="theme" value="<?php echo $files->currentTheme(); ?>" />
                             <input type="hidden" name="edit" value="<?php echo $files->currentFile(); ?>" />