移动端页面需要更短的视觉跳跃、更明确的触控目标和不依赖脚本的正文,网络较弱时也应保持可读。

先保证正文存在,再考虑交互增强

核心内容应由服务器直接输出。菜单、FAQ 展开、搜索弹窗等可以交给 JavaScript,但脚本失败时用户依然能阅读正文、点击普通链接并继续浏览。

图片比例要稳定,不能为了塞满屏幕而拉伸

内容图使用固定宽高比和 object-fit,避免不同图片把页面推成忽高忽低。较窄屏幕上减少同屏图片数量,比强行维持桌面卡片数量更有利于阅读。

弱网络环境下减少不必要依赖

不使用外链字体、CDN 框架和远程接口来显示核心正文,可以降低外部资源失败对页面的影响。图片采用延迟加载,但首屏关键内容不依赖图片完成语义表达。

浏览时可以实际检查这些点

  • 375px 宽度下不出现横向滚动
  • 触控按钮保持足够间距
  • 弹窗关闭后恢复页面滚动
  • 正文与关键链接不依赖 JavaScript 才显示