JS和css實現檢測行動裝置方向的變化並判斷橫豎螢幕

JS和css實現檢測行動裝置方向的變化並判斷橫豎螢幕

 　　這篇文章主要介紹了JS和css實現檢測行動裝置方向的變化並判斷橫豎螢幕,本文分別給出實現代碼,需要的朋友可以參考下

　　方法一：用觸發手機的橫屏和豎屏之間的切換的事件

　　 代碼如下:

　　window.addEventListener("orientationchange", function() {

　　// 宣布新方向的數值

　　alert(window.orientation);

　　}, false);

　　方法二：監聽調整大小的改變

　　 代碼如下:

　　window.addEventListener("resize", function() {

　　// 得到螢幕尺寸 (內部/外部寬度，內部/外部高度)

　　}, 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")

　　}

　　// 添加一個媒體查詢改變監聽者

　　mql.addListener(function(m) {

　　if(m.matches) {

　　// 改變到直立方向

　　document.getElementById("test").innerHTML="改變到直立方向";

　　}

　　else {

　　document.getElementById("test").innerHTML="改變到水平方向";

　　// 改變到水平方向

　　}

　　});