首先需要再head标签添加这样一段代码
<meta name="viewport" content="width=device-width,height=device-width,initial-scale=1.0,user-scalable=no">
因为需求是为了满足WEB端和手机端都可以查看整体效果 但由于UI没有设计移动端的样式 所以我想说把这个页面横屏 这样的话效果一样可以在手机端展示 所以我们需要判断是否是在移动端
function isMobileDevice() {var userAgent = navigator.userAgent || navigator.vendor || window.opera;// 常见的移动设备标识var isAndroid = /android/i.test(userAgent);var isiOS = /iphone|ipad|ipod/i.test(userAgent);var isOpera = /opera mini/i.test(userAgent);var isWindows = /IEMobile/i.test(userAgent);var isBlackBerry = /BB10/i.test(userAgent);var isMobileWebkit = /Mobile/i.test(userAgent);if (/Mobile|Android|Silk|Kindle|BlackBerry|Opera Mini|Opera Mobi|OPiOS|FxiOS|IEMobile/i.test(userAgent)) {return true;}return false;
}
如果判断是移动端 那么我再去让整个页面横屏
if (isMobileDevice()) {let width = window.screen.width;let height = window.screen.height;let x = (width/1080).toString().substring(0,4)let y = null;y = (height/1920).toString().substring(0,3);let rotate = (height/1920).toString().substring(0,3);let topPx = height - width;document.getElementById('rotatePage').style.width = '1920px';document.getElementById('rotatePage').style.height = '1080px';document.getElementById('rotatePage').style.position = 'fixed';document.getElementById('rotatePage').style.top = '-'+(width/2)+'px';document.getElementById('rotatePage').style.left = '50%';document.getElementById('rotatePage').style.zIndex = '999';document.getElementById('rotatePage').style.transform = 'scaleX('+ x +') scaleY('+ y +')';document.getElementById('rotatePage').style.transformOrigin = 'left top';document.body.style.transform = 'rotate(90deg)';
} else {console.log("当前设备为非移动端");
}
整体的页面布局需要在整个div外面再套一层div 为了方便整个页面旋转 在id为rotatePage内去渲染页面需要展示的内容。
<body>
<div id="outerBox"><div id="rotatePage"></div>
</div>
</body>
)
)
)