公司想在手机上查看excel表格的数据，希望能横屏查看
在百度搜寻后，决定使用css和js实现。
1.css样式代码
```/*横屏---------------*/#screen-change{position:absolute;left:50%;top:50%;overflow:hidden;z-index:10}#screen-change.w{height:100vw;width:100vh;transform:translate(-50%,-50%) rotate(90deg);-webkit-transform:translate(-50%,-50%) rotate(90deg)}#screen-change.h{height:100vh;width:100vw;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}
2.head加上meta说明 ， body设置id，class
<head><meta name="viewport" id="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></head><body id="screen-change" class="h" ontouchstart>
3.js 代码
var cur_clientwidth = 0;$(document).ready(function () {cur_clientwidth = document.body.clientWidth;})//屏幕旋转function horizontal_screen() {var viewport = document.getElementById('viewport');var dw = null;var screenChange = document.getElementById('screen-change');function a() {if (document.body.clientHeight > document.body.clientWidth) {dw = 750; //页面的高度screenChange.classList.remove('h');screenChange.classList.add('w');} else if (document.body.clientHeight < document.body.clientWidth) {screenChange.classList.remove('w');screenChange.classList.add('h');//dw = 1334; //页面的宽度dw = cur_clientwidth;console.log(dw);}viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')}a();window.addEventListener("orientationchange", function () {if (window.orientation == 0) {screenChange.classList.remove('h');screenChange.classList.add('w');dw = 750; //页面的高度viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')} else if (window.orientation == 90) {screenChange.classList.remove('w');screenChange.classList.add('h');//dw = 1334; //页面的宽度dw = cur_clientwidth;viewport.setAttribute('content', 'width=' + dw + ', user-scalable=no')}}, false);}
需要使用的界面就调用horizontal_screen()方法，即可切换横屏或竖屏
4.效果展示
