移动端设备上稀奇古怪的前端问题收集（一）
内容提要
作为前端开发者，定位和解决bug常常令人头疼。文章总结了几个常见问题及其解决方案，包括全屏兼容性、带alpha通道的hex颜色失效、生命周期函数不执行、emoji裁剪和输入框被软键盘覆盖等。
关键要点
-
定位和解决bug是前端开发者常遇到的问题。
-
使用100vh定义全屏显示可能导致兼容性问题，建议使用绝对定位。
-
带alpha通道的hex颜色值在某些预处理器和移动端浏览器中可能失效。
-
生命周期函数不执行的原因包括组件被keep-alive包裹和页面直接关闭。
-
emoji上下被裁剪的问题通常与line-height和font-size设置相同有关，建议调整行距。
-
输入框被软键盘覆盖的问题可能由浏览器未能主动聚焦或软键盘覆盖视口引起。
延伸解读
全屏显示的兼容性问题
使用100vh定义全屏显示在不同浏览器中可能导致兼容性问题。尤其是在移动端，浏览器的视口高度定义不一致，可能导致页面显示不如预期。开发者应考虑使用绝对定位来确保全屏效果的稳定性，避免因浏览器差异而引发的显示问题。
生命周期函数的执行注意事项
在使用Vue或React时，生命周期函数的执行依赖于组件的状态。若组件被keep-alive包裹，可能导致某些函数不执行。此外，用户直接关闭页面也会影响生命周期函数的执行。开发者应在初始化函数中添加对窗口卸载事件的监听，以确保必要的操作能够顺利完成。
输入框被软键盘覆盖的解决方案
在移动端开发中，输入框被软键盘覆盖是常见问题。开发者需确保在软键盘弹起时，输入框能够自动聚焦并滚动到视口内。如果浏览器未能主动聚焦，可能需要手动实现这一功能。此外，某些旧版浏览器或特定webview可能会导致软键盘覆盖在视口上，需与客户端协作解决。
延伸问答
如何解决移动端全屏显示的兼容性问题？
建议使用绝对定位来实现全屏覆盖，代码为：{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; }。
带alpha通道的hex颜色值在移动端可能出现什么问题？
在某些预处理器中可能无法正确识别，导致颜色丢失；部分移动端浏览器也可能不支持该格式，导致颜色显示异常。
为什么Vue或React的生命周期函数可能不执行？
可能是因为组件被keep-alive包裹，或用户直接关闭页面导致实例被销毁。
如何避免emoji在文本中被裁剪？
建议调整line-height，避免将其设置为与font-size相同，并通过margin控制行距。
输入框被软键盘覆盖的原因是什么？
可能是浏览器未能主动聚焦输入框，或软键盘覆盖在视口上方而非压缩视口。
如何确保输入框在软键盘弹起时不被覆盖？
开发者需要主动聚焦输入框并使其滚动到视口内，使用代码：inputEle.focus(); inputEle.scrollIntoView();。
