- 常见兼容性问题
不同浏览器的样式差异：
解决：使用标准 CSS 或重置样式表（如 normalize.css）。
iOS 和 Android 的默认样式差异：
比如按钮、输入框的样式。
解决：清除默认样式，设置统一样式。
css
复制代码
input, button {
-webkit-appearance: none;
appearance: none;
}
iOS 中 position: fixed 不稳定：
iOS 下有时会发生滚动时 fixed 定位失效。
解决：改用 transform 实现固定效果。
css
复制代码
position: absolute;
transform: translateY(100px);
字体放大问题：
一些 Android 浏览器在字体超过一定大小时会放大。
解决：
css
复制代码
html {
-webkit-text-size-adjust: 100%;
}
点击区域过小：
解决：设置合理的点击区域（如最小 40x40 px）。
iOS 滚动卡顿：
原因：缺少硬件加速。
解决：使用 -webkit-overflow-scrolling: touch;。
- 如何解决图片在移动端的拉伸或显示问题？
答：
确保图片的宽高比不变：
css
复制代码
img {
max-width: 100%;
height: auto;
}
使用 object-fit：
css
复制代码
img {
object-fit: cover;
}
- 移动端开发如何适配不同分辨率？
答：
使用 viewport 配置视口。
使用弹性布局或媒体查询适配不同屏幕宽度。
使用 dpr 检测设备像素比，加载合适的资源。
- 如何优化移动端性能？
答：
压缩 CSS、JS 和图片资源。
使用 CDN 加速。
使用懒加载（如图片懒加载）。
减少 DOM 操作，优化重绘和重排。