关于微信端 顶部会撑开页面的解决方案

!function(){    /**  *clientHeigh  屏幕高度(长度)  *clientWidth  屏幕宽度  * innerHeight 去掉被导航栏遮盖的那部分之后的真是的能够显示的高度  *valrem remVal 都是计算用的参数,自定义的  *  *if-对微信单独讨论的原因是微信只有上面的导航栏,其他UC,QQ等既有上面的 导航栏,也有下面的导航栏  *else-这种方法 在iphone6的语境下,"写死"认为高度为1.28rem =  导航栏+ 信息显示栏(时间等信息的那个nav) ;实际上也差不多 :)  */  c  isWx =/micromessenger/i.test(navigator.userAgent.toLowerCase());    console.log("UA= " + navigator.userAgent.toLowerCase());  console.log("clientHeight= "+clientHeight);    console.log("innerHeight= "+innerHeight);  console.log("valrem= " +valrem);  console.log("clientWidth = " +clientWidth);  console.log("remVar= "+remVar);      if (innerHeight !== clientHeight) {    //if-对微信单独讨论的原因是微信只有上面的导航栏,其他UC,QQ等既有上面的 导航栏,也有下面的导航栏    if (isWx) {      $("#section").css("transform","translateY("+valrem+")");    }else{      //else- 在iphone6的语境下,"写死"认为高度为1.28rem =  导航栏+ 信息显示栏(时间等信息的那个nav) ;实际上也差不多 :)      $("#section").css("transform","translateY("+remVar+")");          }  }}();

唯一的 遗憾是需要借助jquery,这个让人比较不爽,没有找到可以用的js的属性来表示clientHeight.

//version2 这种情况并没有对全不全屏做任何限制.

//version 2  对俺们可爱的头文件进行的特殊处理!function(){  var  clientWidth = document.documentElement.clientWidth,  clientHeight=$(document).height();  innerHeight = window.innerHeight,  remVar=-1*(128-40)*(clientWidth/750)+"px",  remVarWx=-1*(128-40)*(clientWidth/750)+20 +"px",  isWx =/micromessenger/i.test(navigator.userAgent.toLowerCase());  console.log("remVar = "+ remVar);  if (innerHeight !== clientHeight) {    //对微信单独讨论的原因是微信只有上面的导航栏,其他UC,QQ等既有上面的 导航栏,也有下面的导航栏    if (isWx) {      $("#section").css("transform","translateY("+remVarWx+")");    }else{      //这种方法 在iphone6的语境下,"写死"认为高度为 1.28rem =  导航栏+ 信息显示栏(时间等信息的那个nav) ;实际上也差不多 :)      //version 2 为我们可爱的 导航栏留出了空间      $("#section").css("transform","translate3d("+remVar+")");    }  }}();