375px、390px、430px 的阅读重点
这些常见宽度下,顶部保持左菜单、中间品牌、右侧注册入口三段式,不让核心导航横向挤压。正文图片保持完整显示,页面本身不产生横向滚动。
小屏访问的关键不是把所有入口都挤在顶栏,而是确保菜单出现时能控制、关闭后不再遮挡正文。
点击左上角菜单按钮后,左侧抽屉滑出,页面其余位置出现可点击遮罩。
可以点击栏目进入,也可以点遮罩、关闭按钮或按 Esc 退出。菜单打开期间页面滚动会被锁定。
关闭后遮罩不再接收点击,顶栏注册入口、正文文字链和底部快捷应立即恢复正常。
菜单能开关只是第一步。正文不能被固定高度容器困住,页面应使用浏览器自然滚动;主题图片按原比例完整显示,不裁切人物、牌面或标题;长文字在窄屏自然换行,不能为了保持一行而撑出横向滚动。
底部快捷固定显示时,正文末尾会预留空间,避免最后一段被遮住。若使用系统放大字体,顶栏仍优先保证菜单、品牌和注册入口互不重叠,其他导航则通过抽屉访问。
横竖屏切换后,浏览器会重新计算可用宽度,页面仍应保持自然滚动而不是在内部容器单独滚动。若某一链接需要横向拖动才能看到,说明已经偏离本站预期的小屏体验,应优先检查浏览器缩放或页面是否完整加载。