移动端开发有哪些常见的适配问题？
1. 1px 边框问题
（详见 CSS-018）
2. 100vh 问题
移动端浏览器的地址栏伸缩会导致 100vh 不准确：
/* ❌ 旧方案 */
.fullscreen { height: 100vh; }
/* ✅ 新方案 */
.fullscreen { height: 100dvh; } /* dynamic viewport height */3. 点击延迟（300ms）
移动端 click 事件有 300ms 延迟（等待双击缩放判断）：
<!-- 解决方案：禁用缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">4. iOS 输入框内阴影
input {
-webkit-appearance: none; /* 去除默认样式 */
appearance: none;
}5. iOS 安全区域适配
/* iPhone X+ 底部安全区 */
.bottom-bar {
padding-bottom: env(safe-area-inset-bottom);
/* 或 */
padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* iOS >= 11.2 */
}6. 文字溢出
/* 长单词/URL 不换行 */
.word-break {
word-break: break-all;
overflow-wrap: break-word;
}
/* 多行省略 */
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}7. 禁止选中文本/图片
.no-select {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none; /* iOS 长按不弹菜单 */
}8. 软键盘遮挡
// 监听输入框聚焦，滚动到可见区域
input.addEventListener('focus', () => {
setTimeout(() => {
input.scrollIntoView({ behavior: 'smooth' })
}, 300)
})9. 横屏适配
@media (orientation: landscape) {
.layout { flex-direction: row; }
}
@media (orientation: portrait) {
.layout { flex-direction: column; }
}10. Retina 图片
/* 使用 srcset */
<img src="photo.jpg" srcset="photo@2x.jpg 2x, photo@3x.jpg 3x">