移动端适配需四步：一是替换viewport meta标签禁用缩放；二是用postcss-pxtorem和lib-flexible实现rem动态适配，rootvalue按设计稿宽度设为37.5或18.75；三是验证html font-size随设备变化；四是通过srcset或image-set处理多倍图。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中新建React项目后，直接运行会在桌面浏览器打开，页面在手机上显示异常小、文字挤成一团、按钮无法点击——这是因为缺少移动端视口控制和尺寸适配机制。
第一步：配置基础视口 meta 标签
打开 public/index.html 文件，在 区域内找到已有 <meta name="viewport" ...> 标签，将其替换为：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这行代码强制浏览器以设备物理宽度渲染页面，并禁用双指缩放。如果保留默认的 user-scalable=yes，用户误触缩放后布局会彻底错乱，且无法通过代码恢复。
第二步：启用 rem 动态适配（推荐 Vite 项目）
Cursor 新建的 React 项目默认使用 Vite，适配方案需配合插件实现。执行以下命令安装依赖：
pnpm add -D postcss-pxtorem lib-flexible
在项目根目录创建 postcss.config.js，写入：
module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'], selectorBlackList: [/^html$/] } } };
【rootValue: 37.5 是关键值，对应 750px 设计稿除以 20，若设计师给的是 375px 稿，请改为 18.75】
接着在 src/main.jsx（或 index.js）顶部添加：
import 'lib-flexible'
这行代码会在页面加载时自动根据设备 DPR 和屏幕宽度动态设置 html 的 font-size，后续所有 rem 单位都会以此为基准换算。
第三步：验证适配是否生效
重启开发服务器（pnpm dev），用 Chrome DevTools 切换到 iPhone SE 模拟器，打开控制台输入：
getComputedStyle(document.documentElement).fontSize
若返回类似 "37.5px"（iPhone SE）、"75px"（iPhone 14 Pro Max）等随设备变化的值，说明 rem 基准已动态生效。
此时再写 CSS，例如 font-size: 1.6rem，实际像素会自动按比例缩放——375px 屏下是 60px，750px 屏下就是 120px。
第四步：处理高 DPI 屏幕图片模糊问题
方法一：用 srcSet 提供多倍图
在 JSX 中这样写：<img src="./icon@1x.png" srcset="./icon@1x.png 1x, ./icon@2x.png 2x, ./icon@3x.png 3x">
方法二：CSS 背景图用 image-set()
background-image: image-set(url(icon@1x.png) 1x, url(icon@2x.png) 2x);
不手动处理时，@2x 图片在普通屏上会放大显示导致模糊，而 @1x 图在 Retina 屏上又会变虚——必须显式声明倍率映射关系。
