深色模式
移动 Web 开发
1. 移动布局方案
展开答案与追问
资料说明： PDF 历史参考答案，保留原文供对照复习；其中旧版 API、兼容性及性能结论不代表当前推荐实践。
2. 移动端兼容性
展开答案与追问
资料说明： PDF 历史参考答案，保留原文供对照复习；其中旧版 API、兼容性及性能结论不代表当前推荐实践。
https://zhuanlan.zhihu.com/p/28206065
1.IOS移动端click事件300ms的延迟相应
3.h5底部输入框被键盘遮挡问题
10.CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用
position的left 和top来定位
2.开启硬件加速
9.上下拉动滚动条时卡顿、慢
body {-webkit-overflow-scrolling:
touch;overflow-scrolling: touch;}
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
3. 小程序
展开答案与追问
资料说明： PDF 历史参考答案，保留原文供对照复习；其中旧版 API、兼容性及性能结论不代表当前推荐实践。
移动端手势
4. 图片在安卓上，有些设备模糊问题
展开答案与追问
参考答案（校订）：
先检查图片源像素是否足以覆盖实际显示尺寸与设备像素比：例如以 100 CSS 像素展示、DPR 为 2 时，通常需要约 200 像素宽的源图。用 srcset/sizes、image-set 或合适的多倍图选择资源，避免把小图放大。原 PDF 截图针对特定旧 Android 浏览器的背景图处理；background-size:contain 会改变缩放与留白，不能当成所有模糊问题的通用修复。
PDF 原图（历史资料，以上方校订文字为准）：
5. 固定定位布局键盘挡住输入框内容
展开答案与追问
参考答案（校订）：
软键盘可能改变可视视口，固定底栏和输入框要结合真实设备验证。可在聚焦后按需调用 input.scrollIntoView({block:"center"})，结合 VisualViewport 的 resize 等事件调整布局，并在卸载时移除监听。原 PDF 提供了定时轮询 activeElement、切换定位方式的历史方案，不应无条件复制为通用修复；注意滚动跳动及定时器清理。
PDF 原图（历史资料，以上方校订文字为准）：
6. click 的 300ms 延迟问题和点击穿透问题
展开答案与追问
参考答案（校订）：
约 300ms 的点击延迟来源于部分旧移动浏览器对双击缩放的等待。现代设备行为依浏览器、视口与交互设置而异，不能默认都有该延迟。适当设置 viewport，并可按需求使用 touch-action:manipulation；不要为此禁止用户缩放。点击穿透还与触摸事件后合成的点击、浮层移除等有关，应统一事件模型并避免重复绑定。
7. iPhone、iPad 输入框默认内阴影如何处理？
展开答案与追问
参考答案（校订）：
原 PDF 用 -webkit-appearance:none 清除旧版 iOS 输入控件的原生外观。需要时可结合 appearance:none 与 box-shadow:none，并自行补齐边框、焦点和禁用态样式。应仅针对确有问题的控件使用，避免丢失必要的可用性提示。
css
input.custom-input {
-webkit-appearance: none;
appearance: none;
box-shadow: none;
}PDF 原图（历史资料，以上方校订文字为准）：
8. 移动端适配- dpr 浅析
展开答案与追问
资料说明： PDF 历史参考答案，保留原文供对照复习；其中旧版 API、兼容性及性能结论不代表当前推荐实践。
https://www.jianshu.com/p/cf600c2930cb
dpr = 物理像素 / css 像素
在dpr = 2； 1px的css像素在设备中是2px的物理像素，这会导致在设备上看上去
1px的边框是2px
解决方法：
用transfrom： scale（）缩小dpr倍数
在meta标签中设定scale缩小两倍
9. 移动端扩展点击区域
展开答案与追问
资料说明： PDF 历史参考答案，保留原文供对照复习；其中旧版 API、兼容性及性能结论不代表当前推荐实践。
父级代理事件
将a标签设置成块级元素
10. 上下拉动滚动条时卡顿、慢
展开答案与追问
参考答案（校订）：
原 PDF 的 -webkit-overflow-scrolling:touch 针对旧版 iOS 的惯性滚动行为，不能概括为所有滚动卡顿的修复。实际应先用性能面板定位长任务、频繁布局、重绘或过大的 DOM，必要时用虚拟列表、减少同步工作和合适的 passive 监听。未标准化的 overflow-scrolling:touch 不应作为跨浏览器方案。
PDF 原图（历史资料，以上方校订文字为准）：
11. iOS 长按触发系统菜单如何处理？
展开答案与追问
参考答案（校订）：
原 PDF 实际讨论的是长按触发系统菜单，并非浏览器进程崩溃。-webkit-touch-callout:none 可在部分 WebKit 环境抑制长按链接等的系统菜单，属于非标准行为，需按需使用并验证。它不能修复真正的“闪退”；若进程退出，应另查内存、页面规模和浏览器缺陷。
css
.custom-control { -webkit-touch-callout: none; }PDF 原图（历史资料，以上方校订文字为准）：
12. ios 和 android 下触摸元素时出现半透明灰色遮罩
展开答案与追问
参考答案（校订）：
可按需用 -webkit-tap-highlight-color 调整部分移动浏览器的点击高亮。设为 transparent 会移除该反馈，必须另外提供清晰的按下和键盘焦点样式；该属性不是跨浏览器标准保证，也不会改变真实的点击行为。
css
.custom-control { -webkit-tap-highlight-color: transparent; }
.custom-control:focus-visible { outline: 2px solid #2563eb; }PDF 原图（历史资料，以上方校订文字为准）：
13. active 兼容处理 即 伪类：active 失效
展开答案与追问
参考答案（校订）：
部分旧移动 Safari 对 :active 的反馈存在历史兼容差异，原 PDF 建议添加 touchstart 监听属于旧环境技巧。现代项目先使用 button 等原生交互元素，并同时提供 :active、:focus-visible 及必要的禁用样式；在真实目标浏览器验证后再添加局部兼容逻辑，不要为激活样式默认阻止触摸滚动。
14. 旧 Android 的背景与圆角不一致如何排查？
展开答案与追问
参考答案（校订）：
原 PDF 针对旧 Android 背景绘制与圆角不一致，给出的处理是 background-clip:padding-box。该属性控制背景绘制范围，不是通用的“圆角修复”。实际还需核对 border-radius、背景绘制、子元素溢出及目标浏览器；要裁剪子内容时可按需使用 overflow:hidden，并检查阴影、滚动和焦点样式。
PDF 原图（历史资料，以上方校订文字为准）：
15. 讲讲 viewport 和移动端布局
展开答案与追问
参考答案（校订）：
移动页面通常设置 viewport 为 width=device-width,initial-scale=1，再用 Flex/Grid、媒体查询、流式尺寸与合适的图片资源适配屏幕。不要默认添加 user-scalable=no 或限制最大缩放，否则会损害可访问性。视觉视口、布局视口及软键盘行为要分开验证。