# 移动端适配

> 商家在手机上打开后台时，Shoplazza 应用依然好用：响应式布局、小屏保留核心功能、按触控习惯设计控件。

商家不只坐在电脑前管店——他们会用手机查订单、改设置。确保后台在移动设备上打开时，你的应用依然可用。

## 响应式设计

- 在承载应用界面的 HTML 页面加 viewport meta 标签，让小屏幕以正确比例渲染：

  ```html
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  ```

- 布局自动适配窄屏：单列布局、可折叠导航、表格优雅降级（堆叠或在自身容器内滚动）。
- 以纵向滚动为主，尽量避免横向滚动元素。

## 核心功能保持可用

- 应用的核心功能在移动设备上要能用——不只是能显示，而是能完整操作。
- 某个功能确实无法在移动端使用时，在界面上明确说明，不要让它悄无声息地失败。

## 面向触控设计

- 主要控件的触控目标至少 44 × 44 像素——按钮、菜单项、关闭图标。
- 不依赖悬停（hover）：只在鼠标悬停时出现的内容（提示气泡、行内操作、下拉触发器）在触屏上无法触达，要提供点按方式。
- 移动端表单保持简短，并使用正确的输入类型（`type="email"`、`type="number"`），让系统弹出合适的键盘。