如何让网站适配移动端

要让网站适配移动端，请添加 viewport meta 标签，采用弹性宽度进行移动优先的布局，并使用 CSS 断点在较大屏幕上重新排版——堆叠列、折叠菜单、缩放图片以适应屏幕。然后在手机宽度下检查每个页面，看是否存在横向滚动、文字过小或按钮太小难以点击的问题。对于 AI 构建的网站，一条清晰的提示词，加上在手机尺寸预览中的一次检查，通常就能修复大部分问题。

响应式设计究竟是什么

响应式网站使用同一套页面和网址，并随屏幕自适应。它不是一个单独的“m.”网站，而是由 CSS 在特定宽度处改变布局。其基本组成部分包括：

• viewport meta 标签，告诉移动浏览器使用设备的真实宽度。
• 流式布局，使用百分比、弹性盒（flexbox）和网格（grid），而不是固定的像素宽度。
• 媒体查询（或 Tailwind 的 md: 这类框架类名），在超过某个宽度时改变布局。
• 弹性媒体——会缩小以适应其容器的图片和视频。

这很重要，是因为你的很多流量可能来自手机，而且谷歌索引的是页面的移动版本。如果内容或链接只存在于桌面端，谷歌也可能看不到它们。

选项与取舍

移动优先通常更简单：单列是最容易实现的布局，随着空间增大逐步增加列，比去掉列要省事。

通常会出问题的部分

viewport 标签

如果页面在手机上看起来像一个缩小的桌面网站，那就是缺少了 viewport 标签：

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

不要添加 maximum-scale=1 或 user-scalable=no。禁止双指缩放会让视力较弱的人难以使用网站。

固定宽度与横向滚动

最常见的响应式问题，是某些内容比屏幕还宽：固定的 width: 1200px 容器、宽表格、很长的网址或代码块，或者没有设置 max-width: 100% 的图片。这样整个页面就会横向滚动。应使用 max-width 替代 width，让文字自动换行，并为较宽的内容提供它们自己的滚动区域。

导航

桌面端的五个菜单链接在手机上很难放得下。常见的解决方法是使用一个菜单按钮，点击后打开一个面板。保留两到三个最重要的操作始终可见，例如“预订”“购物车”“登录”，并确保菜单可以用键盘操作，并且容易关闭。

文字与点击目标

• 在手机上，正文约 16 px 是合理的最小字号。在字号较小的输入框中，iPhone 点击时会自动放大页面。
• 让按钮和链接易于点击。WCAG 2.2 AA 规定最小为 24×24 CSS 像素（或保持足够的间距）；约 44 像素对拇指操作更为舒适。
• 相邻链接之间留出间距，避免人们点错。

表格与数据

宽表格是响应式应用中最难处理的部分。按优先顺序，选项包括：在手机上只显示较少的列、把每一行变成卡片，或者把表格放在一个可以横向滚动的容器中，并固定第一列。根据人们需要比较的内容来选择。

图片与媒体

使用 max-width: 100% 和 height: auto，通过 srcset 为小屏幕提供较小的文件，并设置宽高以避免布局跳动。嵌入的视频和地图需要一个响应式外层容器，以保持其宽高比。更小的图片也能让页面加载更快，参见如何让网站加载更快。

表单

把标签放在字段上方，让字段占满整个宽度，并使用正确的输入类型（type="email"、type="tel"、inputmode="numeric"），使手机显示匹配的键盘。把提交按钮放在拇指能够够到的位置，并确保在键盘弹出时它仍然可见。

仅悬停触发的交互

手机没有悬停状态。只在鼠标悬停时出现的工具提示、下拉菜单和预览，对触摸用户来说是不可见的。请让它们在点击时也能工作。

有效的提示词

对于新的构建，请一开始就说明：

以移动优先的方式构建。手机上为单列，平板宽度起为两列，桌面端为完整布局。在 320 px 宽时不能横向滚动，正文字号至少 16 px，点击目标至少 44 px，小屏幕上使用菜单按钮，表格在手机上转换为卡片。

对于已有的页面，请描述你看到的情况：

在手机上，/pricing 页面会横向滚动，三张套餐卡片被挤在一起。在 768 px 以下将卡片纵向堆叠，让对比表格在其自身容器内横向滚动，并固定功能列，桌面端布局保持不变。

以 375 px 宽度检查每个页面。列出所有溢出、重叠、小于 16 px 的文字或 44 px 的点击目标，或仅能通过悬停使用的内容，然后逐一修复。

分步操作

1. 确认 viewport 标签存在于页面的 head 中。
2. 在 320–375 px 宽度下测试，可使用浏览器的设备模式，或手机尺寸的预览。从上到下滚动每一个页面。
3. 优先修复横向滚动。 找出过宽的元素；在它消除之前，其他问题都很难判断。
4. 处理导航：菜单按钮，关键操作保持可见。
5. 检查文字、点击目标和表单，覆盖每个关键流程——注册、搜索、结账、联系。
6. 处理表格和媒体：卡片或滚动容器，响应式图片和嵌入内容。
7. 检查中间尺寸。 缓慢地将宽度从手机拖动到桌面；布局常常在平板宽度附近出问题。
8. 在真实手机上测试。 模拟器会漏掉一些问题，例如屏幕键盘遮挡按钮、刘海屏，以及移动网络下网站的速度。

常见错误

• 只在一种手机尺寸下测试。 请检查小屏手机、大屏手机和平板。
• 为了适配而在手机上隐藏内容。 谷歌索引的是移动版本，而手机用户需要相同的信息。
• 在 viewport 标签中禁用缩放。
• 在手机上使用桌面尺寸的图片，会增加加载时间和流量消耗。
• 固定定位元素堆积：固定的页头、Cookie 横幅和聊天气泡，可能会遮住半个手机屏幕。
• 弹窗无法关闭，因为在小屏幕上关闭按钮移到了屏幕之外。

移动端检查清单

• 已添加 viewport meta 标签，且未禁用缩放
• 所有页面在 320 px 宽时都没有横向滚动
• 正文约 16 px；输入框不会触发缩放
• 点击目标足够大，且间距合适
• 菜单在手机上可用，并且支持键盘操作
• 表格在手机上易于阅读（卡片、较少的列或滚动容器）
• 图片和嵌入内容会缩放；提供了合适大小的文件
• 表单使用正确的输入类型；提交按钮可以轻松够到
• 没有重要内容依赖于悬停
• 至少在一部真实手机上测试过

响应式布局也是无障碍访问的一部分：WCAG 要求内容在 320 px 宽度和 200% 缩放下仍能正常使用。如果你正在构建一个人们每天都会在手机上使用的应用，如何构建适合移动端的网页应用会进一步讲解，包括可安装的 PWA。

Mythex 中的响应式设计

Mythex 可以构建响应式网页应用，在 Pro 套餐中还可以将其封装为 Android 和 iPhone 应用。在工作区中，点击预览上方的手机图标（切换为移动端），即可在手机尺寸的框架中查看你的应用，拖动框架边缘还可以尝试其他宽度（预览与代码）。文档中的移动端响应式提示词提供了修复小屏布局的简短入门提示词。也请在真实手机上检查：打开已发布的网址，或分享预览链接并在手机上打开。

常见问题