HTML 在手机软键盘弹出顶起影响页面布局

H5在手机端，尤其是安卓手机，如果用了定位或者用了百分比的元素，很容易在键盘弹起后引起页面错乱，其中分2种情况：

**情况1：**在页面中用了position: fixed; bottom: 0;。把元素定位在页面的底部，可是这时候键盘弹起后，该定位元素也会跟着键盘一起弹起。网上大多数答案是：修改文档的排版，改为用absoult，或者监听页面高度变化等方法，在这种情况中亲测无效！

具体的思路后面会提到，先说解决方法：
在JS/JQ中加入以下代码片段：

var winHeight = $(window).height();
$(window).resize(function() {
    var thisHeight = $(this).height();
    var keyboardHeight = thisHeight - winHeight;
    $(".需要定位的class名/ id").css({ 'bottom': keyboardHeight + 'px' });
});

注意修改第5行的内容，用JQ选中需要定位的元素，设置样式，在测试下，是不是完美解决了！

情况2：、在CSS中使用背景图或者文档中的元素，高度都用了百分比作为高度单位。譬如：（width: 100%; height: 100%; background-image: url('pic.png');），在键盘弹起后，背景图 / 文档内容被压缩。（注意，这种和上面的情况又不一样，网上大多数的解决方法都是针对这种情况的）

解决方法：
在JQ或者JS中，加入以下代码片段（监听页面高度发生变化，为body自定义高度，不要使用100%），解决方法很多，我觉得这种的代码最少

    var winHeight = $(window).height(); //获取当前页面高度  
     $("body").height(winHeight);

具体分析：
在安卓手机中，我们可以把手机屏幕想象成一个大容器，正常情况下，这个大容器只是承载着我们打开H5的浏览器，浏览器可以想象成是手机的一个子容器，正常情况下这个子容器占满了整个屏幕。

然而键盘，可以想象成是和浏览器同级的一个容器，也属于手机的一个子容器。通常情况下，这个子容器是隐藏的，需要的时候弹起来
** 注： **这种假设只在安卓端成立，因为苹果和安卓原本就不一样

在键盘弹起来后，手机屏幕就需要放下2个容器（浏览器+键盘）。所以浏览器所占的高度就小了。

举个栗子：
手机屏幕高度假设为1000px。键盘没弹起情况下，键盘容器高度为0。浏览器高度为1000px，占满整个屏幕。当键盘弹起后，假设键盘高度为300px。那么浏览器只剩下了700px。（能理解这一点很重要）

所以上面页面错乱的现象就很好解释了

** 情况1：**因为浏览器所占的高度减少了（从1000减少到700）。而position: fixed; 则以浏览器的高度进行定位（并不是body/html的高度）。所以这时候我们无论怎么修改body的高度，该弹起来的还是会弹起来。

而我的处理方式则是：

1、先获取整个页面的高度（winHeight）
2、监听页面高度发生变化（resize方法）
3、在页面高度发生变化后，在获得变化后的页面高度（thisHeight）
4、获取键盘高度（keyboardHeight）这里需要说明一下，为什么是用 thisHeight - winHeight，因为页面缩小后，这样得出来的数字是负数，在后续会用到（记得是负数）
6、获取使用定位的元素，重新修改css的bottom定位，修改为负数。因为键盘弹起后，肯定比我们想要的想过高出了一个键盘的距离，所以使用定位为负数，并且定位在文档的下面，一个键盘的像素的位置，在视觉上就达到了我们的效果
7、可能会疑惑，如果键盘收起来了呢，元素不就一直在body的下方？其实并不会的，因为键盘收起来后。页面高度又发生了变化，这时候thisHeight和winHeight是相等的，所以设置到css中的时候，bottom:0px。又达到了我们想要的效果

情况2：
其实情况2不解释也可以了。就是因为浏览器高度发生了变化，所以用了百分比的元素在高度变化后，元素高度也随之缩小了。
所以我们可以在页面加载完成后，先获得页面的高度，把实际的高度转化为px。设置在页面上，这样就算浏览器高度发生了变化，实际body还是会撑开，这时候就不会影响页面的内容了

**THE END**

HTML 在手机软键盘弹出顶起影响页面布局

猜你喜欢