js／css 检测移动设备方向的变化 判断横竖屏幕
js／css 檢測移動設(shè)備方向的變化 判斷橫豎屏幕
方法一：用觸發(fā)手機的橫屏和豎屏之間的切換的事件
window.addEventListener("orientationchange", function() {
// 宣布新方向的數(shù)值
alert(window.orientation);
}, false);
?
?
// 方法二：監(jiān)聽調(diào)整大小的改變
window.addEventListener("resize", function() {
// 得到屏幕尺寸 (內(nèi)部/外部寬度，內(nèi)部/外部高度)
?
}, false);
?
?
css判斷橫豎屏幕
/* portrait */
@media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
}
?
本地window.matchMedia方法允許實時媒體查詢。我們可以利用以上媒體查詢找到我們是處于直立或水平視角：
var mql = window.matchMedia("(orientation: portrait)");
// 如果有匹配，則我們處于垂直視角
if(mql.matches) {?
// 直立方向
alert("1")
} else {?
//水平方向
alert("2")
}?
// 添加一個媒體查詢改變監(jiān)聽者
mql.addListener(function(m) {
if(m.matches) {
// 改變到直立方向
document.getElementById("test").innerHTML="改變到直立方向";
}
else {
document.getElementById("test").innerHTML="改變到水平方向";
// 改變到水平方向
}
});
?
轉(zhuǎn)載于:https://www.cnblogs.com/czzblog/p/3678489.html
總結(jié)
以上是生活随笔為你收集整理的js／css 检测移动设备方向的变化 判断横竖屏幕的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工商宇宙分期乐信用卡申请容易过吗？
- 下一篇： 文件组备份还原