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

最新推荐文章于 2022-12-08 11:05:23 发布

转载最新推荐文章于 2022-12-08 11:05:23 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/muzhifeike/p/5871162.html

文章标签：

#javascript #ViewUI

本文介绍了一种针对微信客户端的页面适配解决方案，通过判断是否为微信环境并利用jQuery调整页面元素的位置，解决了微信内置浏览器顶部导航栏导致的内容显示问题。

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

!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+")");
    }
  }
}();

转载于:https://www.cnblogs.com/muzhifeike/p/5871162.html