做移动端网页的时候，总会遇到一些奇葩的问题，在PC端浏览器做模拟调试时，都是完美显示的，但是一到真机调试就是各种坑；
我在做移动端网页时的需求是这样的：
页面背景图片是自适应屏幕大小的，页面上有输入框和按钮，当点击输入框时，移动端的软键盘弹出，但是背景图片不能受影响而被压缩，且页面不能应为软键盘的弹出高度超出屏幕显示高度而上下滚动；
我的解决方案如下：
在页面初始化时，获取设备像素可见宽高，并设置body的高度为此高度；
代码如下：
var clientHeight = document.documentElement.clientHeight;;
var body = document.getElementById("body");
body.style.height = clientHeight + "px";为了防止软键盘弹出式高度增加使得页面滚动，于是我又给body设置overflow:hideden;
代码如下：
body{
width:100%;
overflow:hidden;
}设置完成后，我在PC端的浏览器上做测试，发现已经达到预期的效果了，后来上真机测试，问题来了，软键盘弹出时，页面会发生滚动，body的overflow:hidden无效；IOS和安卓效果都是这样；
后来找了一下相关的案例，终于找到了解决办法；
方法如下：
通过父节点固定，像body的父节点是html，可以通过固定父节点html， 来把其下的子节点固定，当然子节点前提是不做脱离文档流的行为。
html{
position:fixed;
height:100%;
width:100%;
}问题完美解决！！