相容所有瀏覽器的js判斷橫豎屏以及監聽事件

2021-08-19 02:14:21 字數 2621 閱讀 2871

name="x5-orientation"

content="portrait">

uc瀏覽器強制豎屏:

name="screen-orientation"

content="portrait">

但是在iphone裡面我們是沒辦法禁止瀏覽器橫屏,換句話說就是沒辦法禁止瀏覽器旋轉。

所以我們就需要判斷當前處於橫屏還是豎屏,並且增加監聽事件,當螢幕旋轉的時候觸發相應的事件。

我們可以使用 **查詢 來實現上述的功能。dom可以通過程式來獲得**查詢的結果。這是通過 mediaquerylist 介面和它的方法來實現的。要建立 mediaquerylist 物件來存放**查詢需要使用window.matchmedia 方法。

返回乙個新的mediaquerylist 物件,表示指定的**查詢字串解析後的結果。

screendirection =window.matchmedia(mediaquerystring)
var screendirection = window.matchmedia("(orientation: portrait)");
返回值是:

mediaquerylist物件在document上維持著一系列的**查詢,並負責處理當**查詢在其document上發生變化時向***進行通知的傳送。(據此我們就可以檢測橫豎屏,並且當橫豎屏改變的時候觸發相應的事件)。

matches:返回的是乙個boolean,為true則表示當前的document匹配media query list也就是上面的mediaquerystring,否則返回false。依然用上面的例子說,返回true則表示處於portrait(豎屏),false則表示處於landscape(橫屏)。

media:表示我們上面例子中的mediaquerystring,例如上面例子screendirection.media等於"(orientation: portrait)"

onchange:該mediaquerylist介面onchange屬性是乙個事件處理程式屬性代表乙個函式,呼叫時的變化的事件觸發,即當**查詢支援改變現狀。事件物件是乙個mediaquerylistevent例項,這是公認的在舊的瀏覽器medialistquery例項,向後相容的目的。下面是乙個onchange的例子(可以copy到本地試試看):

實際效果是:開啟螢幕不管多大多小都沒有觸發任何事件,我們改變螢幕的大小,只有當第一次滿足max-width: 600px之後觸發onchange 中的true的事件,之後才會觸發false的事件,按照官方的說法這是公認的在舊的瀏覽器medialistquery例項,向後相容的目的,所以我們還是不用它。

addlistener():在**查詢列表上增加乙個新的***,如果列表中已經存在了這個指定的***,這個方法將失去作用。

removelistener():從**查詢列表中移除乙個***,如果列表中不存在這個指定的***,則這個方法將失去作用。

所以我們可以在mediaquerylist新增addlistener()方法,當其橫豎屏發生變化的時候執行相應的事件。so完整**如下:

var screendirection = window.matchmedia("(orientation: portrait)");

screendirection.addlistener(handleorientationchange);

handleorientationchange(screendirection);

function

handleorientationchange

(screendirection) else

}

上述**建立了乙個螢幕方向的測試查詢列表screendirection,並且新增了事件監聽。需要注意的是,當我們新增監聽後,我們其實直接呼叫了一次監聽。這會讓我們的***以目前裝置的螢幕方向來初始化判定**。然後,我們可以在handleorientationchange() 方法中來檢視查詢結果,並且可以設定螢幕方向變化後的邏輯處理**。

JS 判斷瀏覽器

技術牛人寫的世界上判斷是否ie瀏覽器之最短的js 首先一定要在伺服器端執行這樣谷歌才可以執行正常,其他瀏覽器可以非伺服器端 如下 js 其他判斷瀏覽器方法,測試通過 如下 或以下 也可以 下面整理的是一套判斷方法 function getexplorer firefox else if explor...

js常用事件整理 相容所有瀏覽器

1.滑鼠滾動事件。說明 返回值 大於0向上滾動,小於0向下滾動。相容型 所有瀏覽器。函式 滑鼠滾動方向 引數 event 返回 滾輪方向 向上 大於0 向下 小於0 var scrollfunc function e else if e.detail 返回值 alert direct 註冊事件 if...

相容所有瀏覽器的indexof 方法

if array.prototype.indexof 判斷當前瀏覽器是否支援indexof 方法。2 array.prototype.indexof function obj,start 如果不支援,那麼就自定義乙個indexof 方法,第乙個引數是要查詢的元素,第二個引數表示查詢的起始位置。3 f...