h5横竖屏监测，在手机上模拟有时监测有误
- 在手机上竖屏打开，提示‘横屏效果更好’
- 横屏后，显示“小主真棒”
- 然后再竖屏，提示‘横屏效果更好’
- 关掉页面
- 横着拿手机
- 再打开页面（此时手机是横着的），提示‘横屏效果更好’
示例代码
链接
<html>
<head>
<meta charset="UTF-8">
<style>
html{
font-size: 100px;
}
#example{
font-size: 35px;
}
</style>
</head>
<body>
<div id="example">
<div v-if="flag" class="landscape-body">
小主，您真棒，已经横屏~~~{{flag}}
</div>
<div v-else class="portrait-body">
小主，横屏效果更好，把您的设备开启横屏体验吧3333333333~~~{{flag}}
</div>
</div>
<script src="./lib/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#example",
data:{
flag:true
},
created:function(){
var _this = this;
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
_this.orientationFun();
}, false);
_this.orientationFun();
},
methods:{
orientationFun:function(){
var width_doc = screen.width;
var height_doc = screen.height; //文档流的高度
// var _height = screen.height; //屏幕的高度
// if (window.orientation == 180 || window.orientation == 0) {
if(width_doc>height_doc){
this.flag = true;
}else{
this.flag = false;
}
// if (window.orientation == 90 || window.orientation == -90 ){
// this.flag = false;
// }
}
}
})
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
希望对你有用
window.addEventListener('orientationchange', function(event){
});
// css 媒体查询
@media screen and (orientation:portrait) {
}
@media screen and (orientation:landscape) {
}
只监听resize试一下，我用LZ几乎相同方法，在安卓机型上遇到其他的问题了也，更改只是监听resize事件就可以了LZ可以自己试一下，如果还是不行的话，可以在判断的函数里边强制进行重拍，这是终极办法~