移动端必须添加viewport meta标签，否则iOS Safari和Android Chrome会强制缩放；推荐使用width=device-width、initial-scale=1.0等属性，并配合rem+媒体查询、flexbox布局、srcset响应式图片及字体抗锯齿优化。
移动端视口设置必须加 viewport meta 标签
不加这行，iOS Safari 和 Android Chrome 会强制缩放页面，导致按钮点不准、文字小得看不清。很多开发者在 PC 上调试没问题，一上真机就失效，根源常在这里。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">是最稳妥的起手式 -
user-scalable=no在电商页中合理：防止用户误操作放大后布局错乱，尤其商品图和加入购物车按钮区域 - 别用
width=375或固定像素值——不同安卓机屏幕宽度差异大，device-width才是动态适配的关键
用 rem + 媒体查询做弹性字体和间距
单纯用 px 写死尺寸，在 iPhone 14 Pro 和低端安卓屏上体验天差地别；全靠 vw/vh 又容易在横屏时失衡。折中方案是根字体动态计算 + 少量断点微调。
- 在
上用 JS 设置font-size：document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';
（以 375px 设计稿为基准，16px 对应 1rem） - 关键组件如商品卡片高度、按钮行高、标题字号，统一用
rem，例如：font-size: 1.125rem;、padding: 0.75rem 0.5rem; - 在
@media (min-width: 414px)和@media (min-width: 480px)里微调html的font-size，避免超大屏手机字号过大
flexbox 布局优先，慎用 float 和绝对定位
移动端滚动性能敏感，float 触发重排开销大，position: absolute 容易脱离文档流导致高度塌陷，尤其在商品列表动态加载时。
- 首页轮播区：用
display: flex+overflow-x: auto+scroll-snap-type实现原生滑动，比 JS 轮播更流畅 - 商品网格：用
display: grid配合grid-template-columns: repeat(auto-fill, minmax(160px, 1fr))，自动适配 2 列或 3 列（小屏 2 列，大屏 3 列） - 购物车悬浮按钮：用
position: fixed+bottom: 1rem+right: 1rem，但必须加z-index: 100并测试是否被微信内置浏览器遮挡
图片加载必须用 srcset + loading="lazy"
一张未压缩的 1200×800 商品图，在 3G 网络下可能加载 5 秒以上，直接导致跳出率飙升。不能只靠后端返回一张图再用 CSS 缩放。
立即学习“前端免费学习笔记（深入）”；
- 商品图标签示例：
<img src="product-320.jpg" srcset="product-320.jpg 320w, product-640.jpg 640w, product-960.jpg 960w" sizes="(max-width: 480px) 320px, (max-width: 768px) 640px, 960px" loading="lazy" alt="无线蓝牙耳机"> -
sizes属性告诉浏览器：在什么视口宽度下该用多宽的图，比单纯写width: 100%更精准 - 首屏关键图（如 Logo、轮播主图）去掉
loading="lazy"，否则 iOS Safari 会延迟渲染
实际项目中最容易被忽略的是：商品价格数字的字体抗锯齿处理。iOS 上 font-weight: 600 在小字号下边缘发虚，建议对 .price 类额外加 -webkit-font-smoothing: antialiased;，且避免用系统默认的 San Francisco 字体做价格展示——它在非 Apple 设备上回退失败率高。
