通过 H5新特性 orientationchange 事件判断是否横屏
window.onorientationchange = function () {
if(window.orientation === 90 || window.orientation === -90){
alert('横屏了')
} else {
alert('没有横屏')
}
}
在vue中:
<template>
<div id="app">
<router-view />
<div class="prevent-tran" v-show='showPrevent' @touchmove.prevent>
<img src="https://img-blog.csdnimg.cn/2022010703481639937.png">
<p>为了您的良好体验<br/>请将手机/平板竖屏操作</p>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
showPrevent: !1
}
},
created () {
this.rotate()
window.onorientationchange = this.rotate
},
methods: {
rotate () {
if (window.orientation === 90 || window.orientation === -90) {
this.showPrevent = !0
} else {
this.showPrevent = !1
}
}
}
}
</script>
<style scoped>
.prevent-tran {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(46, 46, 46);
text-align: center;
z-index: 99999;
display: block;
}
.prevent-tran img {
margin: 60px auto 30px;
}
.prevent-tran p {
width: 100%;
height: auto;
font-size: 22px;
color: rgb(98, 98, 98);
z-index: 999999;
line-height: 34px;
text-align: center;
}
</style>
如果用js写的话:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
</head>
<body>
<noscript>
<strong>We're sorry but dodgem-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<script>
(function rotate(){
var orientation=window.orientation;
var pd = null;
function createPd(){
if(document.getElementById('preventTran') === null){
var imgData = 'https://img-blog.csdnimg.cn/2022010703481639937.png';
pd = document.createElement('div');
pd.setAttribute('id','preventTran');
pd.style.position = 'fixed';
pd.style.left = '0';
pd.style.top = '0';
pd.style.width = '100%';
pd.style.height = '100%';
pd.style.overflow = 'hidden';
pd.style.backgroundColor = '#2e2e2e';
pd.style.textAlign = 'center';
pd.style.zIndex = '99999';
document.getElementsByTagName('body')[0].appendChild(pd);
var img = document.createElement('img');
img.src = imgData;
pd.appendChild(img);
img.style.margin = '60px auto 30px'
var br = document.createElement('br');
var p = document.createElement('p');
p.style.width = '100%';
p.style.height = 'auto';
p.style.fontSize = '22px';
p.style.color = '#626262';
p.style.zIndex = 999999;
p.style.lineHeight = '34px';
p.style.textAlign = 'center';
p.innerHTML = '为了您的良好体验';
p.appendChild(br);
p.innerHTML += '请将手机/平板竖屏操作';
pd.appendChild(p);
}
}
if(orientation==90||orientation==-90){
if(pd == null && document.getElementById('preventTran') === null) createPd();
document.getElementById('preventTran').style.display = 'block';
}
window.onorientationchange=function(){
if(pd == null && document.getElementById('preventTran') == null) createPd();
document.getElementById('preventTran').style.display='none';
rotate();
};
})();
</script>
最后将其封装成一个组件:
<template>
<div class="prevent-tran" v-show='showPrevent' @touchmove.prevent>
<img src="https://img-blog.csdnimg.cn/2022010703481639937.png">
<p>为了您的良好体验<br/>请将手机/平板竖屏操作</p>
</div>
</template>
<script>
export default {
name: 'BasePrevent',
created () {
this.rotate()
window.onorientationchange = this.rotate
},
data () {
return {
showPrevent: !1
}
},
methods: {
rotate () {
if (window.orientation === 90 || window.orientation === -90) {
this.showPrevent = !0
} else {
this.showPrevent = !1
}
}
}
}
</script>
<style lang="scss" scoped>
.prevent-tran {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgb(46, 46, 46);
text-align: center;
z-index: 99999;
display: block;
img {
margin: 15px auto 15px;
}
p {
width: 100%;
height: auto;
font-size: 18px;
color: rgb(98, 98, 98);
z-index: 999999;
line-height: 26px;
text-align: center;
}
}
</style>
在app.vue中使用
<template>
<div id="app">
<router-view />
<base-prevent/>
</div>
</template>
<script>
import BasePrevent from '@/components/base/prevent/BasePrevent'
export default {
name: 'App',
components: {
BasePrevent
}
}
</script>
<style lang="scss">
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
max-width: 750px;
width: 100%;
margin: 0 auto;
}
</style>