feat(modile): improve read experience in mobile mode

layout/_partial/base-head.ejs

@@ -33,7 +33,7 @@
     <%- partial('critical-css/critical-style') %>
     <link id="stylesheet-fancybox" rel="preload" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <link id="stylesheet-base" rel="preload" href="<%- url_for("css/style.css") %>?v=<%- theme.source_version %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
-    <link id="stylesheet-mobile" rel="preload" href="<%- url_for("css/mobile.css") %>?v=<%- theme.source_version %>" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='(max-width: 960px)'">
+    <link id="stylesheet-mobile" rel="preload" href="<%- url_for("css/mobile.css") %>?v=<%- theme.source_version %>" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='screen and (max-width: 960px)'">
     <link id="stylesheet-theme-dark" rel="preload" href="<%- url_for("css/dark.css") %>?v=<%- theme.source_version %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" as="script">
     <link rel="preload" href="<%- url_for('scripts/main.js') %>?v=<%- theme.source_version %>" as="script">

src/js/main.js

@@ -1,11 +1,10 @@
 import Package from '../../package.json'
 
 import init from './init'
-import { initMobile } from './mobile'
-import './initSidebar'
 import initTheme from './theme'
-import { scroll } from './scroll'
+import initScroll from './scroll'
 import fancybox from './fancybox'
+import './initSidebar'
 
 // print console info
 const logStyle =
@@ -18,14 +17,11 @@ console.info(`%c 📦 ${Package.homepage} `, logStyle)
 // site base
 init()
 
-// mobile
-initMobile()
-
 // theme
 initTheme()
 
 // scroll event
-scroll()
+initScroll()
 
 // fancybox
 fancybox()

src/js/scroll.js

@@ -1,6 +1,6 @@
 import archerUtil from './util'
 
-const scroll = function () {
+const initScroll = () => {
   const $banner = $('.banner:first'),
     $postBanner = $banner.find('.post-title a'),
     $bgEle = $('.site-intro:first'),
@@ -16,7 +16,7 @@ const scroll = function () {
     $bgEle.offset().top + $bgEle.outerHeight() - $header.height() / 2
 
   // toc 的收缩
-  $tocCatalog.on('click', function () {
+  $tocCatalog.on('click', () => {
     $tocWrapper.toggleClass('toc-hide-children')
   })
 
@@ -25,7 +25,7 @@ const scroll = function () {
   let previousHeight = 0,
     continueScroll = 0
 
-  function isScrollingUpOrDown(currTop) {
+  const isScrollingUpOrDown = (currTop) => {
     continueScroll += currTop - previousHeight
     if (continueScroll > 30) {
       // 向下滑动
@@ -43,7 +43,7 @@ const scroll = function () {
   // 是否在向上或向下滚动
   let crossingState = -1
   let isHigherThanIntro = true
-  function isCrossingIntro(currTop) {
+  const isCrossingIntro = (currTop) => {
     // 向下滑动超过 intro
     if (currTop > bgTitleHeight) {
       if (crossingState !== 1) {
@@ -75,7 +75,7 @@ const scroll = function () {
     })
   }
 
-  function updateProgress(scrollTop, beginY, contentHeight) {
+  const updateProgress = (scrollTop, beginY, contentHeight) => {
     const windowHeight = $(window).height()
     let readPercent
     if (scrollTop < bgTitleHeight) {
@@ -93,7 +93,7 @@ const scroll = function () {
 
   // rAF 操作
   let tickingScroll = false
-  function updateScroll(scrollTop) {
+  const updateScroll = (scrollTop) => {
     const crossingState = isCrossingIntro(scrollTop)
     // intro 边界切换
     if (crossingState === 1) {
@@ -110,15 +110,22 @@ const scroll = function () {
       $sidebarMenu.removeClass('header-sidebar-menu-black')
       $backTop.addClass('back-top-hidden')
     }
-    // 文章页
     if (isPostPage) {
-      // 向上滑动一定距离显示 header banner
-      // 向下滑动隐藏 header banner
-      const upDownState = isScrollingUpOrDown(scrollTop)
-      if (upDownState === 1) {
-        $banner.removeClass('banner-show')
-      } else if (upDownState === -1 && !isHigherThanIntro) {
-        $banner.addClass('banner-show')
+      // 顶部 Banner 的显示与隐藏
+      const isMobile = archerUtil.isMobile()
+      if (isMobile) {
+        if (isHigherThanIntro) {
+          $banner.removeClass('banner-show')
+        } else {
+          $banner.addClass('banner-show')
+        }
+      } else {
+        const upDownState = isScrollingUpOrDown(scrollTop)
+        if (upDownState === 1) {
+          $banner.removeClass('banner-show')
+        } else if (upDownState === -1 && !isHigherThanIntro) {
+          $banner.addClass('banner-show')
+        }
       }
       // 进度条君的长度
       updateProgress(scrollTop, articleTop, articleHeight)
@@ -133,7 +140,7 @@ const scroll = function () {
     const bindedUpdate = updateScroll.bind(null, scrollTop)
     archerUtil.rafTick(tickingScroll, bindedUpdate)
   }
-  const throttleOnScroll = archerUtil.throttle(onScroll, 50)
+  const throttleOnScroll = archerUtil.throttle(onScroll, 100)
 
   onScroll()
   $(document).on('scroll', throttleOnScroll)
@@ -144,4 +151,4 @@ const scroll = function () {
   })
 }
 
-export { scroll }
+export default initScroll

src/js/util.js

@@ -140,6 +140,25 @@ const archerUtil = {
     }
     return false
   },
+
+  isMobile: () => {
+    const MOBILE_MAX_WIDTH = 960
+    if (window.matchMedia) {
+      const mql = window.matchMedia(
+        `screen and (max-width: ${MOBILE_MAX_WIDTH}px)`
+      )
+      return mql.matches
+    } else {
+      const innerWidth =
+        window.innerWidth ||
+        document.documentElement.clientWidth ||
+        document.body.clientWidth
+      if (innerWidth <= MOBILE_MAX_WIDTH) {
+        return true
+      }
+      return false
+    }
+  },
 }
 
 export default archerUtil

src/scss/_mobile/_partial/_post-page-mobile.scss

@@ -0,0 +1,14 @@
+// ========== main ========== //
+.anchorjs-archer {
+  display: none;
+}
+
+// ========== content ========== //
+.article-entry {
+  padding: 0.25rem 1rem;
+}
+
+// ========== license ========== //
+.license-wrapper {
+  padding: 0.25rem 1rem;
+}

src/scss/mobile.scss

@@ -2,6 +2,7 @@
 @import '_variables';
 
 @import '_mobile/_partial/index-page-mobile';
+@import '_mobile/_partial/post-page-mobile';
 @import '_mobile/_partial/_post/writing-enhance-mobile';
 @import '_mobile/_partial/_sidebar/sidebar-tags-mobile';
 
@@ -140,15 +141,7 @@ header {
 
 // ========== fixed footer ========== //
 .back-top {
-  width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
-}
-
-.back-top-rounded {
-  width: 2.5rem;
-  height: 2.5rem;
-  line-height: 2.5rem;
+  display: none;
 }
 
 // ========== content ========== //