运用场景：检查用户的手机，当用户手机横屏的时候，进行弹窗提示，禁止点击
实现方法：
在入口文件index.html或者main.js进行代码判断，这样可以确保每个页面都可以被检测到，但是要全局添加遮罩层，可以通过入口文件index.js进行添加
通过index.html的
<style> .pop { position: absolute; top: 0; left: 0; 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 8888; } .pop span { position: absolute; 100%; left: 50%; top: 50%; margin: auto; color: #fff; font-size: 32px; text-align: center; transform: translate(-50%,-50%); } </style> </head> <body> <div id="app"></div> <div class="pop" id="pop" style="display: none;"><span>为了您更好的体验，请将手机调整至竖屏！</span></div> <!-- built files will be auto injected --> </body>
<script>
// 旋转移动设备的时候进行横屏提示
window.onorientationchange=function(){
if(window.orientation==90||window.orientation==-90){
document.getElementById("pop").style.display = 'block';
}else{
document.getElementById("pop").style.display = 'none';
}
}
// 刷新的时候进行判断
if(window.orientation==90||window.orientation==-90){
document.getElementById("pop").style.display = 'block';
}else{
document.getElementById("pop").style.display = 'none';
}
</script>
如果只是弹窗提示，可以在main.js上进行检测判断
// // 横屏提示 window.addEventListener( 'onorientationchange' in window ? 'orientationchange' : 'resize', function () { if (window.orientation === 90 || window.orientation === -90) { // Vue.$vux.toast.text('横屏可能导致页面异常，建议竖屏操作！', 'middle') Vue.$vux.alert.show({ title: '', content: '为了您更好的体验，<br/>请将手机调整至竖屏！' }) } // window.location.reload(); }, false)