移动端设备上稀奇古怪的前端问题收集（一）
💡
原文中文，约2700字，阅读约需7分钟。
📝
内容提要
作为前端开发者，定位和解决bug常常令人头疼。文章总结了几个常见问题及其解决方案，包括全屏兼容性、带alpha通道的hex颜色失效、生命周期函数不执行、emoji裁剪和输入框被软键盘覆盖等。
🎯
关键要点
- 定位和解决bug是前端开发者常遇到的问题。
- 使用100vh定义全屏显示可能导致兼容性问题，建议使用绝对定位。
- 带alpha通道的hex颜色值在某些预处理器和移动端浏览器中可能失效。
- 生命周期函数不执行的原因包括组件被keep-alive包裹和页面直接关闭。
- emoji上下被裁剪的问题通常与line-height和font-size设置相同有关，建议调整行距。
- 输入框被软键盘覆盖的问题可能由浏览器未能主动聚焦或软键盘覆盖视口引起。
❓
延伸问答
如何解决移动端全屏显示的兼容性问题？
建议使用绝对定位来实现全屏覆盖，代码为：{ 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();。
➡️
