移动端设备上稀奇古怪的前端问题收集（一）
💡
原文中文，约2600字，阅读约需7分钟。
📝
内容提要
本文讨论了前端开发中常见的 bug 及其解决方案，包括全屏显示的 vh 兼容性问题、带 alpha 通道的 hex 颜色值失效、生命周期函数不执行、emoji 被裁剪和输入框被软键盘覆盖等问题，并提供了具体的解决方法和建议。
🎯
关键要点
- 使用 vh 定义全屏显示时可能会遇到兼容性问题，建议使用绝对定位来实现全屏覆盖。
- 带 alpha 通道的 hex 颜色值在某些预处理器中无法正确识别，可能导致颜色丢失，部分移动端浏览器也未适配此格式。
- 生命周期函数不执行的问题可能由组件被 keep alive 或页面直接关闭导致，需使用相应的事件监听来处理。
- 文本中的 emoji 可能因 line-height 和 font-size 设置相同而被裁剪，建议通过 margin 控制行距。
- 输入框被软键盘覆盖的问题可能因浏览器未能主动聚焦或软键盘设置不当导致，需手动聚焦输入框或调整客户端设置。
❓
延伸问答
如何解决移动端全屏显示的 vh 兼容性问题？
建议使用绝对定位来实现全屏覆盖，代码为 { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }。
带 alpha 通道的 hex 颜色值在移动端浏览器中可能出现什么问题？
部分移动端浏览器未适配此格式，可能导致颜色显示不正常。
为什么生命周期函数在某些情况下不执行？
可能是组件被 keep alive 或页面直接关闭导致，需使用事件监听处理。
如何避免文本中的 emoji 被裁剪？
建议去除 line-height 的限制，通过 margin 控制行距来避免裁剪。
输入框被软键盘覆盖的原因是什么？
可能是浏览器未能主动聚焦输入框或软键盘设置不当导致的。
如何手动聚焦输入框以避免被软键盘覆盖？
可以使用 JavaScript 代码：const inputEle = document.querySelector('#target-input'); inputEle.focus(); inputEle.scrollIntoView();
➡️
