JS和css實(shí)現(xiàn)檢測(cè)移動(dòng)設(shè)備方向的變化并判斷橫豎屏幕
方法一:用觸發(fā)手機(jī)的橫屏和豎屏之間的切換的事件
window.addEventListener("orientationchange", function() {
// 宣布新方向的數(shù)值
alert(window.orientation);
}, false);
方法二:監(jiān)聽(tīng)調(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方法允許實(shí)時(shí)媒體查詢(xún)。我們可以利用以上媒體查詢(xún)找到我們是處于直立或水平視角:
var mql = window.matchMedia("(orientation: portrait)");
// 如果有匹配,則我們處于垂直視角
if(mql.matches) {
// 直立方向
alert("1")
} else {
//水平方向
alert("2")
}
// 添加一個(gè)媒體查詢(xún)改變監(jiān)聽(tīng)者
mql.addListener(function(m) {
if(m.matches) {
// 改變到直立方向
document.getElementById("test").innerHTML="改變到直立方向";
}
else {
document.getElementById("test").innerHTML="改變到水平方向";
// 改變到水平方向
}
});
相關(guān)文章
js分解url參數(shù)(面向?qū)ο?極簡(jiǎn)主義法應(yīng)用)
剛看到笑看風(fēng)云寫(xiě)的JavaScript面向?qū)ο?極簡(jiǎn)主義法)和一個(gè)分解url參數(shù)面試題,我作了一下修改,記錄下來(lái)2012-08-08Javascript/Jquery——簡(jiǎn)單定時(shí)器的多種實(shí)現(xiàn)方法
本文為大家詳細(xì)介紹下使用Javascript/Jquery實(shí)現(xiàn)簡(jiǎn)單的定時(shí)器,方法有多種,大家可以根據(jù)自己的喜好自由選擇,希望對(duì)大家有所幫助2013-07-07如何在JavaScript中等分?jǐn)?shù)組的實(shí)現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分?jǐn)?shù)組的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10點(diǎn)擊提交按鈕后按鈕變灰色不可用狀態(tài)的三種方法
當(dāng)點(diǎn)擊提交后,提交按鈕變灰色不可用,這樣可有效防止重復(fù)提交,本代碼就是實(shí)現(xiàn)這樣一個(gè)功能2013-09-09layui 中select下拉change事件失效的解決方法
今天小編就為大家分享一篇layui 中select下拉change事件失效的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片...2007-03-03