移动端细节
手机浏览吃瓜网时,页面应该怎样工作?
移动端页面的首要目标是可读、可点、不会横向溢出。这里按菜单、正文、图片、搜索与故障排查分开说明,不把移动端页面写成产品发布会。

导航:屏幕变窄后保持可理解
桌面端导航在手机上会折叠为菜单按钮。按钮必须能用键盘和触摸操作,展开状态通过可访问属性反映;即使JavaScript没有运行,正文区域仍然直接存在于HTML中,不会出现“加载失败就什么都看不到”的情况。
正文:字号、行宽与间距优先保证阅读
移动端正文不应该为了塞进更多内容而缩得很小。页面会缩减左右留白、让长标题自动换行,并保持段落之间的节奏。表格或长链接如果存在,需要在小屏上能够换行或横向滚动,而不是把整个页面撑出屏幕。
图片:保持比例,不作为页面骨架
站内图片用于帮助识别主题或区分内容区域,CSS会让图片在容器内按比例缩放。对于入口说明、规则和帮助页面,如果文字已经足够清楚,就不需要每一段都插图。
搜索:弹窗默认隐藏,只在主动操作后打开
站内搜索不会在页面加载时自动弹出。点击搜索按钮后才显示输入框,可以通过关闭按钮、点击遮罩或按ESC退出;关闭后页面恢复滚动。搜索提交后进入独立结果页,并对关键词做长度限制与转义。
显示不正常时按这个顺序排查
- 重新加载当前页面排除临时资源加载失败。
- 检查浏览器缩放过大的手动缩放可能让布局看起来异常。
- 尝试系统浏览器某些内置WebView对CSS支持不同。
- 回到站内索引如果只是某个入口打不开,可从页面索引重新进入目标页。