diff --git a/theme/css/page.css b/theme/css/page.css
index e99d7d5..e649a51 100644
--- a/theme/css/page.css
+++ b/theme/css/page.css
@@ -105,4 +105,16 @@ h2 {
     font-size: 1.2em !important;
     margin-top: 10px !important;
     margin-right: 4px !important;
+}
+
+@media (max-width: 641px) {
+    .hideonmobile {
+        display: none !important;
+    }
+}
+
+@media (min-width: 640px) {
+    .hideonmobile {
+        display: inline-flex !important;
+    }
 }
\ No newline at end of file
diff --git a/theme/index.hbs b/theme/index.hbs
index d0294f6..d61aa55 100755
--- a/theme/index.hbs
+++ b/theme/index.hbs
@@ -57,14 +57,19 @@
 </head>
 
 <body style="margin:0;padding:0;">
+    {{#if is_print }}
+    {{#toc}}{{/toc}}
+    {{/if}}
+
     <mdui-layout>
+        {{#unless is_print }}
         <mdui-top-app-bar class="topbar" scroll-behavior="elevate">
             <mdui-button-icon icon="menu" id="open-drawer"></mdui-button-icon>
-            <mdui-button id="open-study-env">实验环境</mdui-button>
+            <mdui-button class="hideonmobile" id="open-study-env">实验环境</mdui-button>
             <mdui-top-app-bar-title>{{ book_title }}</mdui-top-app-bar-title>
             <div style="flex-grow: 1"></div>
             {{#previous}}
-            <mdui-button id="previous—page" href="{{ path_to_root }}{{link}}">上一章</mdui-button>
+            <mdui-button id="previous—page" class="hideonmobile" href="{{ path_to_root }}{{link}}">上一章</mdui-button>
             {{/previous}}
             {{#next}}
             <mdui-button id="next—page" href="{{ path_to_root }}{{link}}">下一章</mdui-button>
@@ -73,20 +78,18 @@
             <mdui-button-icon icon="web" href="{{git_repository_url}}"></mdui-button-icon>
             {{/if}}
             {{#if print_enable}}
-            <mdui-button-icon href="{{ path_to_root }}print.html" title="Print this book" aria-label="Print this book"
-                icon="print">
+            <mdui-button-icon class="hideonmobile" href="{{ path_to_root }}print.html" title="Print this book"
+                aria-label="Print this book" icon="print">
             </mdui-button-icon>
             {{/if}}
         </mdui-top-app-bar>
 
         <mdui-navigation-drawer close-on-overlay-click class="toc-drawer" id="toc-drawer" placement="left" open>
         </mdui-navigation-drawer>
+        {{/unless}}
 
 
-
-        {{#if is_print }}
-        {{#toc}}{{/toc}}
-        {{/if}}
+        {{#unless is_print }}
         <!-- Render toc -->
         <div style="display:none;" id="helperframe">
             {{#toc}}{{/toc}}
@@ -94,20 +97,24 @@
 
         <script src="{{ ../path_to_root }}theme/js/tocrender.js"></script>
         <!-- Render toc finish -->
+        {{/unless}}
 
 
+        {{#unless is_print }}
         <script>
             const navigationDrawer = document.querySelector(".toc-drawer");
             const openButton = document.getElementById("open-drawer");
 
             openButton.addEventListener("click", () => navigationDrawer.open = !navigationDrawer.open);
         </script>
+        {{/unless}}
 
         <mdui-layout-main class="example-layout-main" style="min-height: 100%">
             <div class="mdui-prose">
                 {{{ content }}}
             </div>
 
+            {{#unless is_print }}
             <mdui-dialog headline="Study Env" close-on-esc close-on-overlay-click id="study-env-dialog">
                 <iframe src="about:blank" style="height:80%;width:99%" id="study-env-iframe"></iframe>
             </mdui-dialog>
@@ -118,6 +125,7 @@
                     document.getElementById("study-env-iframe").src = "http://jslinux.cxykevin.top"
                 });
             </script>
+            {{/unless}}
 
             <div style="height:10em;display:flex;max-width: 78%;margin: auto;margin-top:2em;">
                 {{#previous}}
