1.修改index.html
将 index.html的
<div id="splash">
改为
<div id="splash" style="display: none">
2.修改main.js
在main.js
var splash = document.getElementById('splash');
这一行后面加上如下代码
//####
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
if (width < height) {
splash.style.cssText = `position:absolute;top:${(height - width) / 2}px;left:${0 - (height - width) / 2}px;\
width:${height}px;height:${width}px;transform:rotate(90deg);transform-origin:50% 50%;`;
}
let evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(
evt,
function() {
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
if (width > height) {
splash.style.cssText = `position:absolute;top:0px;left:0px;\
width:${width}px;height:${height}px;transform:none;transform-origin:50% 50%;`;
} else {
splash.style.cssText = `position:absolute;top:${(height - width) / 2}px;left:${0 - (height - width) / 2}px;\
width:${height}px;height:${width}px;transform:rotate(90deg);transform-origin:50% 50%;`;
}
},
false
);
//####
网友评论