做手机商城接到一个需求。 具体大概是这样子的,要求用户点击购买按钮后,直接显示输入密码的弹窗并弹出键盘。 拿到需求一想,这挺简单的。 就麻利的写了个模拟的密码输入框,然后在用户点击购买按钮的时候让他弹出来,并且让焦点 focus 在 input 框上。 Chrome 上一试,完全没问题,觉得自己简直太棒了有没有。可是拿出自己的手机一试,oh no ~,键盘直接把页面给推了上去,导致完全看不到弹窗弹的是个什么东西。 解决前 但是在 Android 上是没有任何问题的。观察了下是因为 Android 和 ios 上键盘弹出的行为是不一样的,Android 上键盘弹出来,直接覆盖在原来的页面上,而 ios 上键盘弹出来的时候会直接把整个页面推上去。 怎么解决呢?其实也挺好解决,就是针对不同系统 hack 一下。

购买页面这个弹窗的定位是这么定位的:

// 后面的遮罩
.dialog-wrap {
  width: 100