送你一个封装的移动端横屏展示的JS库

// screenOrientation.js
export default function (option) {
  var _this = this;
  _this.option = {
    'mode': 'portrait', //portrait(竖屏)、landscape(横屏)
    'id': 'wrap', //最外层容器ID
    'init': false,
    'callback': false
  };
  for (var k in option)
    if (option[k] != '') _this.option[k] = option[k];
  var obj = document.getElementById(_this.option.id);
  var className = obj.className || " ";
  var w_width = obj.clientWidth;
  var w_height = obj.clientHeight;
  var flag = 0;
  var timer;
  if (_this.option.mode == "portrait")
    var cssBlock =
      '.' + _this.option.id + '_screenOrientation{-webkit-transform: rotateZ(-90deg) !important; transform: rotateZ(-90deg); position:relative;}';
  else
    // eslint-disable-next-line no-redeclare
    var cssBlock =
      '.' + _this.option.id + '_screenOrientation{-webkit-transform: rotateZ(90deg) !important; transform: rotateZ(90deg); position:relative;}';
  var style = document.createElement("style");
  style.type = "text/css";
  style.textContent = cssBlock;
  document.getElementsByTagName("head").item(0).appendChild(style);
  var _width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  var _height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
  _this.modifyDetec = function () {
    if ((_height < _width && _this.option.mode == "portrait") || (_height > _width && _this.option.mode == "landscape") && flag == 0) {
      obj.style.width = _height + "px";
      obj.style.height = _width + "px";
      obj.style.top = -(_width - _height) * 0.5 + "px";
      obj.style.left = -(_height - _width) * 0.5 + "px";
      obj.className = className + " " + (_this.option.id + "_screenOrientation");
      flag = 1;
      if (_this.option.callback) {
        _this.option.callback();
      }
    } else {
      obj.style.width = w_width + "px";
      obj.style.height = w_height + "px";
      obj.className = className;
      obj.style.top = " ";
      obj.style.left = " ";
      flag = 0;
    }
  }
  function detectOtt() {
    _width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    _height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
    if (window.orientation == 180 || window.orientation == 0 || window.orientation == 90 || window.orientation == -90) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        _this.modifyDetec(_width, _height);
      }, 50);
    }
  }
  if (_this.option.init) {
    _this.option.init();
  }
  detectOtt();
  window.addEventListener("resize", detectOtt, false);
}

import screenOrientation from './screenOrientation.js'
// 方法
screen(){
  // portrait(竖屏)、landscape(横屏)
  // id : 最外层容器DOM元素ID
  new screenOrientation({ mode:'landscape', id:'wrap'})
}