关键在于正确配置viewport meta标签并用CSS模拟手机视觉特征：设置width=device-width、initial-scale=1.0、maximum-scale=1.0、user-scalable=no；用rem适配字体间距；纯CSS绘制比例为9/19.5、圆角40px、border+box-shadow模拟手机壳；慎用vh，优先rem或flex；交互用:active和touch-action替代:hover，动画仅用transform和opacity。
直接用 HTML + CSS 做“看起来像手机”的效果，关键不是模拟硬件，而是控制视觉比例、圆角、阴影、视口行为和交互反馈。真机感来自细节克制，而不是堆砌伪元素。
怎么让页面在手机浏览器里不缩放、不拉伸
几乎所有“不像手机”的问题，根源都在 没配对或配错。只写 width=device-width 不够，必须锁定缩放：
- 注意：iOS Safari 对
user-scalable=no的支持已弱化（出于可访问性），但仍是必要声明 - 如果页面在 Chrome DevTools 手机模式下正常，真机却变形，大概率是这个 meta 缺了
maximum-scale=1.0或漏了引号
怎么画一个可信的手机外壳（不用图片）
用纯 CSS 画手机壳，重点是比例、边框层级和阴影深度，不是像素级还原某款机型：
- 宽高比建议用
9/19.5（如width: 360px; height: 780px），接近主流直屏机 - 外边框用
border: 24px solid #000，内边框用::before+box-shadow模拟金属倒角 - 状态栏区域不要硬塞文字，用
padding-top: 44px预留空间，再加position: relative让内容自然下沉 - 圆角值统一设为
40px（上下边角略大，左右略小也可，但别超过50px，否则失真）
为什么用 rem 而不是 px 做字体和间距
不是为了“高级”，是为了避免 iOS Safari 在横屏/缩放时触发意外的字体重排和布局抖动：
- 根字体大小必须用 JS 动态计算：
document.documentElement.style.fontSize = window.innerWidth / 375 * 100 + 'px'（以 375px 宽为基准） - 所有
font-size、margin、padding改用rem，例如font-size: 0.14rem≈ 14px 在 iPhone SE 上 - 慎用
vh：Safari 在地址栏收起/展开时会重算vh，导致页面跳动；优先用rem或flex占满容器
悬停、滑动这些交互在手机上怎么处理
手机没有 :hover，但可以用 :active 和 touch-action 补偿基础反馈：
-
button, a元素加touch-action: manipulation，减少点击延迟 - 模拟“按下”效果：用
div:hover, div:active双写（PC 端生效hover，手机端靠active） - 滑动区域必须设
overflow-x: auto+-webkit-overflow-scrolling: touch（iOS 旧版必需） - 禁止双指缩放：在 body 加
touch-action: pan-x pan-y，否则长按图片可能触发系统菜单
最常被忽略的是：手机端 CSS 动画帧率不稳定，transform 和 opacity 是唯二能放心用的动画属性，其他一律避免。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
