问题描述：
在安卓手机上使用谷歌浏览器，输入测试网址后进入首页，偶尔会出现元素组件位移的情况，并且点击屏幕后组件位置又正常了。
解决办法：
添加interactive-widget=resizes-content到名字为viewport的元标签中
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
出现原因：
因为安卓手机的谷歌浏览器，计算window.innerHeight的时候，有时会把输入网址时的键盘高度也计算进去了，导致window.innerHeight高度不是真正的视口高度。
参考资料：
developer.chrome.com/blog/viewpo… stackoverflow.com/questions/2…
废话留在最后：
Fuck Google！这个问题足足花了我一周时间，每天就跟他较劲了，这对一个刚入坑两三个月的小白来说是多大的心理伤害啊！刚开始觉得是因为布局写的不对，后来是认为根部组件布局不对，最后才把问题定位到window.innerHeight上。
我用的小米11pro，在debug的过程中发现innerHeight的高度一会儿是1142，一会儿是正确的820，有时明明获取到了820，又会再变成1142，即使我去掉设置rootdiv高度的js代码也会有位移的情况。
花的时间久主要是不清楚这个1142是怎么得来的，就算算上导航高度也不应该是这么高啊。在网上搜索也只能搜innerHeight高度异常相关的问题，导致每天不断尝试还是解决不了问题。
昨天把目光放在了这个322的差值上面，猜测是不是键盘的高度，尝试之后果然是这样。刚开始想获取到innerHeight高度>screen.height的时候减去键盘高度，但是不够优雅。在网上一番搜索尝试，终于让我找到优雅地解决方法了。发出来给遇到的小伙伴避坑吧。
