移动端弹出软键盘页面变形

之前写微信端页面,发现一个问题,就是,写好的页面,

在移动端测试时发现,有定位属性的元素,还有input框 

莫名其妙的都在弹出软键盘的时候,各种扭曲,压缩,

百度了好多,也没有找到原因,

测试后发现情况,我们在写的时候,

经常会把元素的高度height 通过calc计算得出,

这是造成了被各种压缩变形的一种情况;

还有就是,我们试用了 vh 这个属性,(没有验证);

造成了弹出虚拟输入框的话 100vh貌似是屏幕高度 - 虚拟键盘的高度

所以,设置的时候,直接给固定的高度是最好的,

建议使用 rem 或者 % (有人说 % 在移动端有时会出现bug,不过我没遇到过,不清楚)

另外一种bug:,

当某些时候,新建的元素块,其中有 input 并且input框获得焦点;

但是滚动条没有滚动,还是定位在之前的位置,

这样造成用户不知道有没有创建新的东西,会一直点下去,

造成这个原因 就是设置了overflow:auto; 造成的;

取消这个属性即可