2021-01-29

移动端（手机端）表单填写导致窗口滚动穿透的问题实践

一、遇到的问题：一个表单填写与窗口滚动带来的效果与体验：

1. 首先在PC端（电脑上）试验过效果，当然没问题的，但是到了移动端（手机上）试验发现，一点击表单填写时就会自动弹出键盘，这是正常的，但是把表单也被向上移动的窗口顶上去了，有的输入框填不了；撤了键盘，表单失去焦点后又恢复原有的正常页面布局，实在令人作呕；
2. 查找问题：

**（1） 原来给盒子、表单元素设置CSS宽高度时，高度用了单位中的视口单位：vh，这是个很值得令人注意的问题（目前暂时遇到的其中一个不太复杂的移动端的布局差异问题）！！！**
②（2）键盘出来后，也会占据视口高度，但是一般不会在水平方向上伸展占据宽度，所以设置的vh单位就是因为视口高度小了，表单元素以及盒子就会被顶上去！！！
（3）尝试过设置定位为固定定位fixed，absolute，等，实际上问题在于高度问题，高度设置单位不要用 vh 了。

3. 方法与建议：
   ① 设置高度单位为除vh外的其他合适单位，rem、px、vw等；
   （2）否则就算设置了定位也无济于事，难以解决这个问题。

二、还有一个值得注意和记录的问题：

1、tap-highlight-color 样式：
（1）点击某个 a链接标签时，发现出现非我所想要的高亮背景颜色（有点透明的蓝色）情况，因为移动端上默认的 tap-highlight-color 样式；
（2）解决方法：设置 a 链接标签的tap-highlight-color 样式为transparent透明的即可，但是，一定要加上浏览器前缀 -webkit-tap-highlight-color 这样，否则去除不了这个高亮背景色的默认样式！！！