| 响应式布局 | 确保网站在不同屏幕宽度下都能正确显示和操作，不需要横向滚动。 | 使用媒体查询（Media Query）实现：
@media screen and (max-width: 768px) { ... }
使用百分比、vw/vh 替代 px，布局用 Flex 或 Grid，避免绝对定位。 |
| Viewport 设置 | 控制页面初始缩放比例，让内容适应设备宽度。 | 在 HTML 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 字体与可读性 | 移动端屏幕小，应使用大字体和足够的行高提高可读性。 | 正文建议字体大小 ≥ 16px，行高 1.5 ~ 1.8
避免花哨字体，保持清晰；字体颜色对比度不低于 WCAG AA 标准。 |
| 图片自适应 | 防止图片超出屏幕或加载缓慢。 | 使用 CSS：
img { max-width: 100%; height: auto; }
同时使用 WebP 格式优化加载性能。 |
| 按钮触控优化 | 确保按钮区域大且易于触控，符合手指操作习惯。 | 建议点击区域 ≥ 44x44px，避免密集排布。
使用渐变、阴影等方式制造“可点感”视觉。 |
| 页面加载速度 | 移动网络条件有限，加载速度影响留存率。 | 采用懒加载：loading="lazy"
压缩 CSS/JS/图片，启用 Gzip/Br优化。
使用 CDN，合并文件减少请求数。 |
| 表单体验优化 | 提升移动端表单填写效率。 | 为输入设置合适类型：
<input type="email">、<input type="tel">
使用 placeholder 替代 label；提供自动填充与清除按钮。 |
| 手势与滑动支持 | 支持左右滑动、下拉刷新等常见交互习惯。 | 使用库如 Hammer.js，支持常见触控事件。
实现下拉加载、左滑删除等提升交互体验。 |
| PWA 支持 | 增强用户离线体验，增加“安装”功能，媲美 APP。 | 添加 manifest.json，配置名称、图标、启动模式。
使用 Service Worker 缓存关键内容。
添加：
<link rel="manifest" href="/manifest.json"> |
| SEO 与可访问性 | 让移动端也能被搜索引擎良好索引并利于辅助工具读取。 | 使用语义化标签：<header>, <main>, <footer>
所有图片设置 alt 属性；提供跳转链接描述；避免嵌套式点击区域。 |
| iOS/Android 安全区适配 | 解决刘海屏、底部导航条遮挡问题。 | 使用环境变量：
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
或使用 CSS 中的 constant() 做兼容。 |
| 国际化支持 | 提升全球用户访问体验。 | 所有文本内容抽离到语言包文件；支持 RTL 布局。
配置 hreflang 属性，检测用户语言自动切换内容。 |
QQ客服号码:1613514287
微信客服二
