h5页面定位偏移的问题--解答

先自我介绍一下吧，我是程序员阿杰，第一次写博客，有什么写错的地方，请谅解，可以帮我指出错误，努力改进，不多废话了，立刻上内容

作为程序员小白，刚开始做的时候，页面上有输入框，并且需要定位，如下图

类似这种定位到底部的时候，点击输入框，会弹出输入法，安卓手机还是好一点，ios手机立马偏移，当时想了很多种方法，比如说获取到input焦点的时候body回到顶部，这样子是可以让偏移矫正，但存在了很多问题，一个输入框的话，这个方法还是可行的，但像这种存在两个及两个以上的输入框，就行不通了，因为获取到第二个input焦点的时候，body回到顶部，这个弹窗也会缩到底部，被手机输入法挡住了，用户体验很不好。

接下来给大家一个正确的方法：

我的想法应该是body大于了手机屏幕可视区，就会导致了输入法弹出后，定位会上移，出现选不中的现象。

那么，我们不要管input有没有获取到焦点什么的，我们就从body上入手：：

在弹窗显示的时候，给body添加一个class，就是

.bodyHeight {

    position: fixed;

    height: 100vh;

}

这样子，body就是你手机屏幕的可视高度了，就算你的手机输入法弹出来，把弹窗顶上去，但位置不会偏移，依然可以使用。

隐藏弹窗的时候把class删除掉就可以了。。。

很简单，这样子就可以使用了，但还有一个兼容性的问题，ios的safari浏览器底部导航栏会挡住，这里就需要判断是否是safari浏览器了，是的话，就给弹窗的padding-bottom设置一个值，不影响弹窗的显示就可以了。

希望能帮助到大家，谢谢。如果还有什么解决不到的前端问题，发出来一起解决。不要问为什么只是前端问题，因为小编阿杰是一个前端程序员，其他的还不好解决问题。