打包h5适配首屏全屏背景,pc横屏,mobile竖排背景

index.html

  <script type="text/javascript">
    function isPC() {
      var userAgentInfo = navigator.userAgent;
      var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"
      ];
      var flag = true;
      for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          flag = false;
          break;
        }
      }
      return flag;
    }
    if (isPC()) {
      document.getElementById('splash').setAttribute("class", "splash1");
    } else {
      document.getElementById('splash').setAttribute("class", "splash2");
    }
  </script>

2.改style-mobile.css

#splash {
/*  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #171717 url(./bg1.jpg) no-repeat center;
  background-size: 100%;*/
}
.splash1{
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #171717 url(./bg1.jpg) no-repeat center;
  background-size: 100%;
}
.splash2{
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #171717 url(./bg2.jpg) no-repeat center;
  background-size: 100%;
}

标签: none

添加新评论