移动端适配和可访问性怎么做
先理解原理和示例,再练习完整口述与追问。
回答要点
说明 viewport、弹性布局、媒体查询、rem / vw 的取舍,覆盖安全区、软键盘、长文案和横屏。语义化标签、表单 label、键盘操作、焦点和错误提示也要能解释。
原理拆解
移动适配首先保证 viewport 设置和布局可伸缩,再考虑文字、触控目标、安全区、键盘及动态视口。可访问性不仅是增加 aria:语义元素提供原生角色与键盘能力,表单需要可见标签和错误关联,弹窗需要焦点管理。把普通 div 改造成按钮需要补很多行为,优先使用 button。
示例与推演
一个可用的查询表单应有 label 关联 input,提交按钮支持 Enter,错误信息不只靠红色区别。手机上筛选栏可换行或进入目录层,结果区不出现整页横向滚动;超长代码和表格则在自己的容器滚动。弹窗打开后焦点进入弹窗,关闭后恢复到触发按钮,背景内容避免继续被操作。
易错点
不能只在一台手机截图上判断适配完成。至少检查窄屏、长中文、放大字体、键盘操作和减少动画偏好;固定高度 100vh 也可能受移动地址栏影响。
参考回答可直接练习口述
移动端先设置正确 viewport,再用弹性布局和媒体查询适配,不把页面只缩放成一张固定尺寸图。rem/vw 是尺寸策略,不能自动解决长文本、软键盘、安全区和横屏。桌面同时保证内容最大宽度、列表和弹窗可用。可访问性方面用语义化按钮和表单 label,保证键盘能操作、焦点可见、错误有文字说明;不能只靠颜色表达状态。