送你一个封装的移动端横屏展示的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) {

更多内容请见原文，原文转载自：http://www.mark-to-win.com/tutorial/50911.html