preface

We often display things in landscape on mobile, so today we’re going to show you how to do landscape on mobile.

The effect

implementation

Source:

// screenOrientation.js
export default function (option) {
	var _this = this;
	_this.option = {
		'mode': 'portrait'.// Portrait (portrait) landscape(landscape)
		'id': 'wrap'.// Outermost container 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);

}
Copy the code

Use:

import screenOrientation from './screenOrientation.js'

/ / method
screen(){
  // Portrait (portrait) landscape(landscape)
  // id: the DOM element id of the outermost container
  new screenOrientation({ mode:'landscape'.id:'wrap'})}Copy the code

conclusion

Welcome to pay attention to my public account “front-end history robbery Road”

​

Reply keyword e-books, you can get nearly 12 front-end popular e-books.

​

Reply keywords little Red Book 4th edition, you can get the latest “JavaScript advanced Programming” (4th edition) ebook.

​

You can also add me to wechat. I have wooed many IT bigwigs and created a technical exchange and article sharing group. Welcome to join.

​

  • Author: Vam’s Golden Bean Road

  • Main area: front-end development

  • My wechat account is Maomin9761

  • Wechat public number: the front end of the road through robbery

​