JS和css實現(xiàn)檢測移動設備方向的變化并判斷橫豎屏幕
方法一：用觸發(fā)手機的橫屏和豎屏之間的切換的事件
window.addEventListener("orientationchange", function() {
// 宣布新方向的數(shù)值
alert(window.orientation);
}, false);
方法二：監(jiān)聽調整大小的改變
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="改變到水平方向";
// 改變到水平方向
}
});
相關文章
剛看到笑看風云寫的JavaScript面向對象(極簡主義法)和一個分解url參數(shù)面試題，我作了一下修改，記錄下來2012-08-08
Javascript/Jquery——簡單定時器的多種實現(xiàn)方法
本文為大家詳細介紹下使用Javascript/Jquery實現(xiàn)簡單的定時器，方法有多種，大家可以根據(jù)自己的喜好自由選擇，希望對大家有所幫助2013-07-07
這篇文章主要介紹了JavaScript模擬數(shù)組合并concat的相關資料,需要的朋友可以參考下2016-03-03
如何在JavaScript中等分數(shù)組的實現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分數(shù)組的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了JS模擬實現(xiàn)Select效果代碼,涉及JavaScript基于鼠標點擊事件動態(tài)操作頁面元素實現(xiàn)Select效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)標簽頁切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了JavaScript布爾運算符原理使用解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
當點擊提交后，提交按鈕變灰色不可用，這樣可有效防止重復提交，本代碼就是實現(xiàn)這樣一個功能2013-09-09
layui 中select下拉change事件失效的解決方法
今天小編就為大家分享一篇layui 中select下拉change事件失效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
用js實現(xiàn)預覽待上傳的本地圖片...2007-03-03