正文：那我走？

之前给博客做手机适配时，文章页有个挺明显的问题：目录、右下角工具，还有访客提示，挤在一块了。

单独看每个组件都没什么毛病，放到手机那点宽度里，正文反而成了最容易被挡住的那个。

功能越加越多，看文章的地方越来越少

所以这次把几个组件的位置和展开方式重新调整了一下。毕竟这些东西加上去，最后还是为了方便看文章。

目录不需要一直浮在正文上面

目录展开以后，如果还是一个固定浮层，就可能直接盖住下面的内容。手机上空间本来就少，目录稍微长一点，这个问题就更明显了。

本站现在把手机文章页的目录改成了流式卡片：打开时，后面的内容跟着往下排；收起以后，把空间还回去。

关键的定位调整大概是这样：

1
2
3
4
5
6
@media screen and (max-width: 900px) {
  #body-wrap.post #card-toc {
    position: static !important;
    transform: none !important;
  }
}

这里限定了手机视口和文章页，电脑上的目录不跟着一起改。

不过目录也不能无限展开。长文章里标题比较多，直接铺开的话，看正文之前可能先滑了半天目录……

所以展开后给目录内容限制了高度，超出的部分在卡片里滚动：

1
2
3
4
5
6
7
@media screen and (max-width: 900px) {
  #body-wrap.post #card-toc.open .toc-content {
    max-height: min(38dvh, 300px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
}

38dvh 跟着当前视口高度算，再用 300px 限制一下上限。overscroll-behavior 则用来减少目录滚到边缘后，继续带着外层页面滚动的情况。

目录能打开、能滚、能跳转就够了，没必要一直盖在文章上。

右下角工具先收起来

阅读模式、主题切换、目录、评论、回到顶部……这些按钮都挺有用，但不需要每次看文章都一起摆出来。

手机端现在默认只留一个箭头，点开以后再显示完整工具组。点完其中一个工具，或者继续滚动文章时，就自动收回去。

这样平时少占一点位置，要用的时候也不难找。

底部位置还留了手机安全区：

1
bottom: calc(14px + env(safe-area-inset-bottom));

如果设备有底部安全区，就把那部分也算进间距，尽量别让按钮贴着系统操作区域。

提示就别来凑热闹了

博客里还有一个访客提示彩蛋，放在其他页面还挺有意思。但文章页已经有目录和阅读工具，再弹一个提示，多少有点热闹过头了。

所以文章页直接不显示这个提示。

再喜欢小彩蛋，也得给正文留条活路

类似的调整还有正文行高、代码块横向滚动、图片宽度，以及按钮的触摸区域。手机适配也确实不能只把电脑页面缩小一点就结束了。

有些东西还是得拿手机看看

现在加了检查工具展开、收起和切页后操作的测试，能帮忙发现一些状态问题。切换页面用的是 Pjax，所以还得确认新页面里的按钮能重新初始化，也不会重复创建。

但按钮逻辑通过了，实际看起来舒不舒服，还得打开页面看看。文字会不会太挤、手指好不好点、横屏时有没有奇怪的位置，这些都不能只靠代码判断。

先把这几个抢位置的组件安排好。之后再加东西之前，至少先想一下：手机上的正文还有没有地方待）