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

更多内容请见原文，原文转载自:https://blog.csdn.net/weixin_44519496/article/details/120019983