移动端设备上稀奇古怪的前端问题收集（一）
内容提要
本文讨论了前端开发中常见的 bug 及其解决方案，包括全屏显示的 vh 兼容性问题、带 alpha 通道的 hex 颜色值失效、生命周期函数不执行、emoji 被裁剪和输入框被软键盘覆盖等问题，并提供了具体的解决方法和建议。
关键要点
-
使用 vh 定义全屏显示时可能会遇到兼容性问题，建议使用绝对定位来实现全屏覆盖。
-
带 alpha 通道的 hex 颜色值在某些预处理器中无法正确识别，可能导致颜色丢失，部分移动端浏览器也未适配此格式。
-
生命周期函数不执行的问题可能由组件被 keep alive 或页面直接关闭导致，需使用相应的事件监听来处理。
-
文本中的 emoji 可能因 line-height 和 font-size 设置相同而被裁剪，建议通过 margin 控制行距。
-
输入框被软键盘覆盖的问题可能因浏览器未能主动聚焦或软键盘设置不当导致，需手动聚焦输入框或调整客户端设置。
延伸解读
全屏显示的兼容性问题
在移动端开发中，使用 vh 单位定义全屏显示时，可能会遇到不同浏览器对视口高度的定义不一致的问题。为了确保页面能够真正覆盖全屏，建议使用绝对定位的方法，这样可以避免因浏览器差异导致的显示问题。
颜色值的使用注意事项
带 alpha 通道的 hex 颜色值在某些预处理器中可能无法正确识别，导致颜色丢失。此外，部分移动端浏览器也未适配此格式，开发者在使用时需谨慎，确保兼容性，以免影响用户体验。
生命周期函数的处理
在使用 Vue 或 React 时，生命周期函数不执行的问题常常被忽视。开发者应注意组件的状态管理，特别是在使用 keep-alive 时，需使用相应的事件监听来确保生命周期函数的正常执行，避免数据初始化等操作的遗漏。
输入框被软键盘覆盖的解决方案
移动端输入框被软键盘覆盖的问题较为常见，尤其是在某些浏览器或 app 内置 webview 中。开发者应主动聚焦输入框并确保其滚动到视口内，以提升用户输入体验。对于无法控制的环境，可能需要考虑其他解决方案。
延伸问答
如何解决移动端全屏显示的 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();
