个人博客建站步骤怎样检查不同设备的阅读体验：先看正文宽度与字号
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /2d2e4b4ffc0d.html
📄
个人博客建站步骤怎样检查不同设备的阅读体验：先看正文宽度与字号
检查不同设备的阅读体验，最先做的不是买设备，而是在浏览器里把同一篇文章依次缩到手机宽度、平板宽度和桌面宽度，观察正文是否出现横向滚动、每行字数是否失控、字号是否需要放大才能读。时间和人手有限时，优先处理这三项，因为它们影响的是所有读者，而不是少数机型。
先明确检查的前提条件
这套方法适用于已经能正常打开文章页的个人博客，不要求你安装任何监测工具。检查对象是正文区域，不是首页或列表页。判断标准只有一条：读者能否在不缩放、不左右拖动的情况下，从头读到尾。如果博客使用了固定宽度的主题，或者正文被侧边栏挤得很窄，问题会在这一步直接暴露。
用浏览器开发者工具模拟不同宽度
桌面浏览器按 F12 打开开发者工具，切换到设备模拟模式，然后依次设置几个典型宽度：320、375、768、1024、1440。每换一个宽度，重点看四件事：
- 正文有没有出现横向滚动条，出现即说明有元素溢出。
- 一行大约多少个汉字。手机端一行 15 到 25 个汉字比较舒服，桌面端超过 45 个汉字会明显增加换行回扫的负担。
- 正文字号在手机宽度下是否小于 16px，小于这个值多数读者需要手动放大。
- 图片、表格、代码块是否撑破容器，尤其是宽度写死的图片。
这一步不需要真机就能发现大部分布局问题，属于成本最低的检查。
真机上必须补查的项目
模拟器不能完全替代真机，因为触摸操作、系统字体缩放和浏览器地址栏的收放都会改变实际可视高度。借一台手机和一台平板，各打开同一篇文章，检查：
- 把系统字体调大一级，看正文是否仍然完整显示，按钮和导航有没有被挤出屏幕。
- 点击文内链接和目录锚点，看跳转后标题是否被固定导航栏遮住。
- 长按选中一段文字，看行高是否足够，选中区域是否容易误触相邻行。
- 把手机横过来，看正文宽度变化后是否出现新的溢出。
如果系统字体放大后出现内容被裁切，说明布局用了固定高度，这类问题在真机上比在模拟器里更容易复现。
按影响范围决定修复顺序
人手有限时，不要按发现的先后顺序修，而按影响读者数量排序。可以这样判断：
- 先修：正文横向滚动、字号过小、图片溢出。这三类在所有手机读者身上都会出现。
- 再修：行宽过长、行高过密、标题与正文层级不清。影响的是阅读疲劳，不是能否读完。
- 后修：横屏细节、极端小屏、特定浏览器下的细微错位。
一个可执行的验收信号是：在 320px 宽度下，正文不出现横向滚动，字号不小于 16px，一行汉字数落在 15 到 25 之间；在 1440px 宽度下，正文最大宽度被限制在约 700 到 800px，而不是随窗口无限拉伸。达到这两条，就可以先停下来，把时间留给内容。
把检查变成固定动作
与其每次发布后临时想起来检查，不如在发布流程里加一步：文章排版完成后，用开发者工具从 320px 拉到 1440px 扫一遍，再在一台真机上读前两段。这一步大约几分钟，但能挡住大多数阅读体验问题。下一步建议你挑一篇已经发布的旧文章，按上面的宽度顺序实际走一遍，把发现的问题按影响范围记下来，再决定先改哪一类。
