JS和css實現(xiàn)檢測移動設(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="改變到水平方向";
// 改變到水平方向
}
});
相關(guān)文章
js分解url參數(shù)(面向?qū)ο?極簡主義法應(yīng)用)
剛看到笑看風(fēng)云寫的JavaScript面向?qū)ο?極簡主義法)和一個分解url參數(shù)面試題,我作了一下修改,記錄下來2012-08-08Javascript/Jquery——簡單定時器的多種實現(xiàn)方法
本文為大家詳細介紹下使用Javascript/Jquery實現(xiàn)簡單的定時器,方法有多種,大家可以根據(jù)自己的喜好自由選擇,希望對大家有所幫助2013-07-07如何在JavaScript中等分數(shù)組的實現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分數(shù)組的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12JavaScript實現(xiàn)標(biāo)簽頁切換效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)標(biāo)簽頁切換效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10layui 中select下拉change事件失效的解決方法
今天小編就為大家分享一篇layui 中select下拉change事件失效的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09