极客观点
项目管理
HarmonyOS
- 在手机上竖屏打开，提示‘横屏效果更好’
- 横屏后，显示“小主真棒”
- 然后再竖屏，提示‘横屏效果更好’
- 关掉页面
- 横着拿手机
- 再打开页面（此时手机是横着的），提示‘横屏效果更好’
示例代码
链接
<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>
html5
希望对你有用