竖屏阅读先保证完整行宽
手机屏幕窄,最重要的是让正文保持正常横排和足够行宽。本站在小屏幕上把桌面分栏真正归并为单列,图片与侧栏顺序下移,不让正文被挤成一条细长文字柱。
页眉只保留品牌、目录与掌上入口,目录打开后在正常文档流里展开,正文向下移动而不是被透明遮罩盖住。
介绍竖屏手机上的目录入口、收藏习惯、图片查看与页面跳转,让长文在小屏幕上保持清楚节奏。
手机屏幕窄,最重要的是让正文保持正常横排和足够行宽。本站在小屏幕上把桌面分栏真正归并为单列,图片与侧栏顺序下移,不让正文被挤成一条细长文字柱。
页眉只保留品牌、目录与掌上入口,目录打开后在正常文档流里展开,正文向下移动而不是被透明遮罩盖住。
页眉目录适合需要完整栏目时使用;底部固定导航只保留首页、片单、人物与目录四个高频入口,减少小屏幕上反复回到顶部的成本。
底栏为正文和页脚预留空间,并适配设备安全区,不应遮住最后一段文字或链接。
如果你常读某一栏目,可以直接使用浏览器收藏功能。站内所有卡片、相关阅读和页脚入口都使用普通链接,即使关闭JavaScript,正文与栏目跳转仍然可以使用。
图片只在本地文件实际存在时显示;没有上传图片时页面会直接省略图像元素,不出现破损图标或占位提示。
竖屏阅读最容易出现的问题不是字号太小,而是结构仍按桌面思路运行。桌面的双栏、跨列、侧栏和错位视觉如果没有在移动断点彻底重置,就会让正文只剩几字宽。本站因此在手机宽度下同步清除子元素的跨列定位,而不只是把父网格改成一列。
长标题与连续英文也需要允许自然换行,按钮不能用固定宽度挤压文字。图片即使原始像素非常大,也只能在内容列内按比例缩放。
当浏览器字体放大时,页面仍应优先保持单列与可换行,而不是通过隐藏滚动条掩盖越界。可读性比保持桌面装饰位置更重要。
横屏或平板宽度增加后,页面会逐步恢复较宽排版,但正文主列仍受最大宽度约束,不会因为屏幕变宽就把长段文字拉满整个视口。这样可以保持阅读节奏稳定。