精通JavaScript--10移動設備JavaScript開發

時間 2019-11-11

原文原文鏈接

代碼清單10-3　　訪問來自觸摸傳感器的數據html

 1     //在頁面上建立一個<p>元素，用以顯示當前屏幕上的接觸總數量
 2             var touchCountElem = document.createElement("p");
 3 
 4             //定義一個事件處理函數。當一個與接觸相關的事件發生時，執行此函數
 5             function handleTouchEvent(event) {
 6 
 7                 //得到當前屏幕上全部接觸的數組
 8                 var allTouches = event.touches,
 9                     allTouchesLength = allTouches.length;
10 
11                 //當用戶把手指接觸或按在屏幕上時，阻止瀏覽器的默認動做發生
12                 if(event.type === "touchstart") {
13                     event.preventDefault();
14                 }
15 
16                 //在頁面中顯示當前接觸的總數量
17                 touchCountElem.innerHTML = "There are currently" + allTouchesLength + "touches on the screen."
18             }
19 
20             //把<p>元素添加入當前頁面
21             document.body.appendChild(touchCountElem);
22 
23             //當一隻手指與屏幕發生接觸動做（touchstart）或離開動做（touchend）時,
24             //指派相應的事件處理函數來進行處理
25             window.addEventListener("touchstart", handleTouchEvent, false);
26             window.addEventListener("touchend", handleTouchEvent, false);

Apple IOS設備支持一些更先進的與手勢相關的JavaScript事件。當用戶的兩隻或兩隻手以上的手指在屏幕上發生捏或旋轉動做時，這些事件就會發生，並能返回手指在屏幕上的移動距離。然而，這些都是在特定設備上才能生效的。若是你須要複製這些事件到其餘設備上，你會發現Hammer.js（https://hammerjs.github.io/）這個JavaScript庫十分有用。它能很容易地適用多種設備，在你的網站中實適用手勢功能。html5

擴展閱讀：git

https://www.html5rocks.com/en/mobile/touch/github

10.2.3　　訪問姿態傳感器和方向傳感器web

經過姿態傳感器，能夠知道設備的那一面朝上擺放。姿態傳感器還能夠檢測出設備相對於3條旋轉軸是如何擺放的（如圖10-3所示），就如設備有一個內部陀螺儀通常。某些設備，如蘋果的iPhone和iPad,還配置了磁力傳感器，它有助於確立設備擺放的精確方向。圍繞着x軸，y軸和z軸的旋轉能夠分別表示滾動角度、傾斜角度和偏航角度，或用角度表示beta，gamma，和alpha旋轉。ajax

圖10-3　　移動設備的x軸，y軸和z軸旋轉數組

經過獲悉移動設備的擺放姿態，咱們能夠調整頁面中的一些界面元素，以適應新的佈局。如根據擺放姿態相應地把導航菜單安排在主內容顯示區域的上方或側方。W3C Screen Orientation API（JavaScript形式）可讓咱們獲悉設備當前的擺放姿態，不管是肖像模式的豎屏仍是風景模式的橫屏。咱們還能獲悉設備是否處於顛倒擺放的姿態。當設備的擺放姿態發生變化時，它會發出orientationchange事件。咱們能夠利用該事件編寫相應的代碼，於設備的擺放姿態發生變化的那一刻執行。代碼清單10-4的例子演示瞭如何使用Screen Orientation API來把一個CSS類添加至頁面的<body>標籤上，以指出當前設備到底是豎屏仍是橫屏，並能夠相應地進行與之相適應的應用樣式的改變。瀏覽器

代碼清單10-4　　基於移動設備的擺放姿態改變HTML頁面中的一個class屬性緩存

 1             //定義一個事件處理函數。當設備發生豎屏、橫屏改變時、執行此函數
 2             function onOrientationChange() {
 3 
 4                 //若是設備放置的角度爲0°或180°，則其處於豎屏；若是設備放置的角度爲90°或-90°，則其處於橫屏
 5                 var isPortrait = window.orientation % 180 === 0;
 6 
 7                 //根據設備的擺放姿態，爲頁面的<body>標籤添加class屬性
 8                 document.body.className += isPortrait ? " portrait" : " landscape";
 9                 
10             }
11             //當瀏覽器告訴咱們設備的擺放位置姿態已經發生變化時，執行事件處理函數
12             window.addEventListener("orientationchange", onOrientationChange, false);
13 
14             //當頁面首次加載時，執行相同的函數來設定<body>初始的class屬性
15             onOrientationChange();

若是你但願在設備的擺放姿態發生改變時，相應地改變頁面的可視化樣式，請參考使用CSS Media Queries（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）來實現這個功能，而不是使用JavaScript。由於這樣能夠正確地實現關注點分離（separation of concerns）（https://en.wikipedia.org/wiki/Separation_of_concerns#HTML.2C_CSS.2C_JavaScript）。服務器

經過訪問設備內置的陀螺儀，可讓咱們建立移動版的遊戲，如Jenga（https://en.wikipedia.org/wiki/Jenga）或Marble Madness（https://en.wikipedia.org/wiki/Marble_Madness），來考驗用戶的穩定性和神經。當旋轉一個含有陀螺儀的設備時，瀏覽器會根據W3C DeviceOrientation API（https://www.w3.org/TR/orientation-event/）發出擺放姿態改變事件。這個事件所提供的數據表示此設備圍繞3條軸線的旋轉角度數值，以度數爲計量單位。將設備的這些旋轉動做數據傳回給咱們的JavaScript代碼，咱們就能根據程序的邏輯更新相應的顯示方式，顯示內容。代碼清單10-5中代碼演示了若是經過關於設備姿態的DeviceOrientation API來訪問內置陀螺儀，把頁面中的一張圖片按照設備的精確姿態變化進行3D旋轉。它會在當前HTML頁面內添加一個<img>標籤來顯示圖片。所產生的僞3D效果，如圖10-4所示。

代碼清單10-5　　根據移動設備的精確姿態變化來以僞3D方式旋轉圖片

 1             //頁面建立一個<img>元素，指向你所選擇的圖片
 2             var imageElem=document.createElement("img");
 3             imageElem.setAttribute("src","../../img/sfz-bg.png");
 4 
 5             //建立一個事件處理函數來處理設備的擺放姿態事件
 6             function handleOrientationEvent(event){
 7                 
 8                 //獲取設備相對於3條軸線的擺放狀態（稱做alpha，beta和gamma）。加載時以角度數值來表示設備初始的擺放姿態
 9                 var alpha=event.alpha,
10                     beta=event.beta,
11                     gamma=event.gamma;
12                 
13                 //使用CSS將<img>元素圍繞3條軸線進行旋轉
14                 imageElem.style.webkitTransform="rotateZ("+alpha+"deg) rotateX("+beta+"deg) rotateY("+gamma+"deg)";
15             }
16             
17             //把<img>元素添加到頁面中
18             document.body.appendChild(imageElem);
19             
20             //經過陀螺儀，監聽設備的擺放姿態變化，相應地觸發事件處理函數
21             window.addEventListener("deviceorientation",handleOrientationEvent,false);

咱們能夠未來自磁力傳感器的數據核CSS旋轉變化結合起來，構建一個虛擬指南針，或根據用戶位置的朝向來動態調整屏幕上所顯示的地圖。在蘋果公司的移動Safari瀏覽器有一個實驗性的，Webkit內核特有的屬性。當設備移動時，它會根據當前指南針的指向返回參照正北方向的角度數值，這樣咱們就能夠相應地更新屏幕的顯示內容。惋惜，目前尚未用於訪問磁力傳感器的標準API。

代碼清單10-6演示瞭如何根據設備當前所指方向，旋轉HTML頁面中的<img>標籤來表示一個指南針（當指向正北時，圖片直接指向頁面上方）.

代碼清單10-6　　根據移動設備的指南針指向來旋轉圖片

 1             //在頁面建立一個<img>元素，src屬性指向一張指南針圖片
 2             var imageElem = document.createElement("img");
 3             imageElem.setAttribute("src", "../../img/sfz-bg.png");
 4 
 5             //創建一個函數。當設備的指南針指向發生變化時執行此函數
 6             function handleCompassEvent(event) {
 7 
 8                 //獲取iPhone或iPad設備中的指南針的當前指向，以正北起計，按度數計量
 9                 var compassHeading=event.webkitCompassHeading;
10                 
11 
12                 //根據指南針指向的值選擇圖片。當設備發生移動時，圖片中指向正北的箭頭將繼續指向北
13                 imageElem.style.webkitTransform="rotate("+(-compassHeading)+"deg)";
14             }
15 
16             //把<img>元素添加到頁面中
17             document.body.appendChild(imageElem);
18             
19             //監聽設備的姿態變化。當變化發生時，執行事件處理函數
20             window.addEventListener("deviceorientation",handleCompassEvent,false);

擴展閱讀：

https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

10.2.4　　訪問運動傳感器

移動設備的運動傳感器使咱們能夠獲悉當用戶移動手中的設備時，其參考與3條軸線的移動速度。這3條軸線分別爲x軸（左右），y軸（先後），z軸（上下）。對於內置有陀螺儀的設備，測量的是設備繞3條軸線的旋轉速度，座標系統爲x（beta旋轉角度或roll），y（gamma或pitch）和z（alpha或yaw）。

運動傳感器能夠用於製做翻面禁音(flip-to-silence)的應用程序，如Flip4Silence（Android）版的能夠經過Google play下載。利用運動傳感器，能夠實現各類天馬星空的想法。從令用戶能夠經過搖動手上設備來實現表單的從新恢復初始化或撤銷某一個動做，到各類先進的網頁應用，如虛擬地震儀。

當移動設備發生移動或旋轉時，它會根據W3C DeviceMotionEvent API（https://www.w3.org/TR/orientation-event/#deviceorientation）發出相應的JavaScript事件。API傳遞的傳感器的數據，包括有設備的加速度（米/秒2，即m/s2）以及選擇速度（度/秒，即deg/s）。

加速度數據以2種形式給出。一種是考慮重力的影響，另外一種則不考慮。對於後者，即便設備處於絕對的靜止狀態，仍然會報出9.81m/s2的朝下加速度。代碼清單10-7演示瞭如何使用DeviceMotionEvent API來向用戶報出設備當前的加速度。假設運行於HTML頁的上下文環境中，添加兩個<p>標籤來顯示從運動傳感器反饋獲得的數值，分別對應於沒有重力影響和有重力影響的狀況。

代碼清單10-7　　訪問運動傳感器，顯示出設備在任一方向的最大加速度

 1             //建立兩個<p>元素，在其中顯示設備當前的加速度
 2             var accElem=document.createElement("p"),
 3                 accGravityElem=document.createElement("p");
 4             
 5             //定義一個事件處理函數來處理設備的加速度數值
 6             function handleDeDeviceMotionEvent(event){
 7                 
 8                 //獲取檔期加速度在3條軸線上的對應數值，並從當中找出最大值
 9                 var acc=event.acceleration,
10                     maxAcc=Math.max(acc.x,acc.y,acc.z),
11                     
12                     //獲取包含重力影響的加速度在3條軸線上的對應數值，並從當中找出最大值
13                     accGravity=event.accelerationIncludingGravity,
14                     maxAccGravity=Math.max(accGravity.x,accGravity.y,accGravity.z);
15                 
16                 //爲用戶顯示在某軸線上的最大加速度值。一樣，爲用戶顯示在某軸上的考慮重力影響的最大加速度值
17                 accElem.innerHTML="Current acceleration: "+maxAcc+"m/s^2";
18                 accGravityElem.innerHTML="Including gravity: "+maxAccGravity+"m/s^2";
19             }
20             
21             //把兩個<p>元素添加到頁面中
22             document.body.appendChild(accElem);
23             document.body.appendChild(accGravityElem);
24             
25             //當設備移動時，指派響應的事件處理函數
26             window.addEventListener("devicemotion",handleDeDeviceMotionEvent,false);

10.2.5　　未能訪問的傳感器

10.2.6　　事件框架化與傳感器數據

在第4章，我介紹了把觸發頻率很是高的事件進行框架化的處理方法。它減小了這類事件每次發生時要執行的代碼量（根據事件而定，不是每次都執行），以此來得到性能上的提高。對於移動設備，它不能像臺式電腦瀏覽器那樣快速處理JavaScript，於是這項技術的應用是十分重要的。若是沒有應用事件框架化技術，事件處理函數將額外消耗更多的設備內存，使得用戶會以爲網頁或應用程序會不響應。代碼清單10-8演示瞭如何將事件框架化技術應用到DeviceOrientation API，來優化代碼清單10-5.

代碼清單10-8　　應用事件框架化技術，根據移動設備的精確擺放姿態旋轉圖片

 1             //建立若干變量，存儲從設備的姿態事件返回的數據
 2             var alpha=0,
 3                 beta=0,
 4                 gamma=0,
 5                 imageElem=document.createElement("img");
 6             
 7             imageElem.setAttribute("src", "../../img/sfz-bg.png");
 8             
 9             //改寫事件處理函數，處理存儲來自event的值，不作其餘處理
10             function handleOrientationEvent(event){
11                 alpha=event.alpha;
12                 beta=event.beta;
13                 gamma=event.gamma;
14             }
15             
16             //增長一個新函數，使用存儲的變量進行圖片旋轉
17             function rotateImage(){
18                 imageElem.style.webkitTransform="rotateZ("+alpha+"deg) rotateX("+beta+"deg) rotateY("+gamma+"deg)";
19             }
20             document.body.appendChild(imageElem);
21             
22             //與往常同樣，把事件與事件處理函數關聯起來
23             window.addEventListener("deviceorientation",handleOrientationEvent,false);
24             
25             //每500ms執行一次圖片旋轉函數，而不是每一次事件發生時都執行。這能夠有效提升應用程序的性能
26             window.setInterval(rotateImage,500);

10.2.7　　利用傳感器數據進一步發揮

10.3　　網絡鏈接故障與離線狀態

在移動設備上瀏覽網頁會遇到的一個常見的問題，那就是是網絡鏈接掉線問題，特別是當前用戶處於移動狀態，如在火車上。若是用戶點擊一個鏈接，打開一個新頁面，當在Apple IOS7上的一個提示網絡鏈接斷開的界面。

若是咱們要作的是由JavaScript驅動的網頁應用程序，而這裏不能使用生硬的頁面過分處理（以頁面直接跳轉的方法實現），這樣有利於單頁面體驗（在一個頁面內實現原來的多頁內容或其餘調用）的實現，那麼當網絡鏈接出現掉線狀況時，用戶時沒法看到以上這樣的界面的。所以，須要開發人員本身來處理這個異常狀況。例如，在屏幕上告知用戶網絡鏈接已經斷開，或把HTTP請求緩存起來，直至網絡鏈接恢復時再發出。

10.3.1　　在線與離線狀態的檢測

代碼清單10-9中的代碼演示瞭如何在JavaScript代碼運行的任一位置，利用瀏覽器的navigator.onLine屬性，檢測出當前的網絡鏈接是否已經斷開。

代碼清單10-9　　在JavaScript執行的指定位置檢測網絡鏈接掉線狀況

1             var isOnline=navigator.onLine;
2             
3             if(isOnline){
4                 //在網絡可訪問的狀況下所運行的代碼，例如，向服務器發出一個Ajax調用請求
5             }else{
6                 alert("The network has gone offline.Please try again later.");
7             }

代碼清單10-9頗有用，能夠用來包裹在任何須要用到網絡鏈接的代碼的周圍。例如，使用xmlHttpRequest進行Ajax調用，或動態建立其引用來自外部文件源<script>、<img>或<link>等DOM元素。然而，你可能但願在屏幕上給出一個指示，告知用戶當前網絡是否鏈接正常。與其不斷地檢測navigator.onLine的值，咱們不如利用2個JavaScript事件。它們各自在網絡鏈接斷開和網絡鏈接恢復時發生，名稱分別爲offline和online。你能夠將事件處理代碼管理到這些事件上，以在網絡鏈接狀態出現變化時更新頁面顯示內容，如代碼清單10-10所示。

代碼清單10-10　　在JavaScript應用程序中隨時檢測網絡鏈接狀態的變化

 1             //定義一個函數，當網絡鏈接斷開時執行
 2             function goneOffline(){
 3                 alert("No network connection");
 4             }
 5             
 6             //定義一個函數，當網絡鏈接恢復時執行
 7             function backOnline(){
 8                 alert("The network connection has been restored");
 9             }
10             
11             //當網絡鏈接斷開或網絡鏈接恢復時，把各函數關聯到相應的JavaScript事件
12             window.addEventListener("offline",goneOffline,false);
13             window.addEventListener("online",backOnline,false);

代碼清單10-11演示了若是綜合上述兩種檢測網絡鏈接斷開的方法到代碼中，來實現當網絡鏈接斷開時，把Ajax調用存起來，而當網絡鏈接恢復時，立刻發出這些Ajax調用。

代碼清單10-11　　當網絡鏈接斷開時，依次緩存個Ajax調用：當網絡鏈接恢復時，在依次發出Ajax調用

 1             //定義一個變量，當由於網絡鏈接斷開而使得Ajax調用沒法當即執行時，把Ajax調用放在stack數組中（能夠時多個Ajax調用，以數組做爲隊列進行存儲）
 2             var stack=[];
 3             
 4             //定義函數以生產Ajax調用
 5             function ajax(url,callback){
 6                 
 7                 //利用XMLHttpRequest類使得能夠再瀏覽器中產生Ajax請求
 8                 var xhr=new XMLHttpRequest(),
 9                     LOADED_STATE=4,
10                     OK_STATUS=200;
11                 
12                 //若是瀏覽器處於離線狀態，把函數參數（url和callback）添加到stack變量中以便用於稍後處理
13                 if(!navigator.onLine){
14                     stack.push(arguments);    
15                 }else{
16                     
17                     //若是瀏覽器處於在線狀態,則發出Ajax調用
18                     xhr.onreadystatechange=function(){
19                         
20                         //readyState屬性爲4表示服務響應已經完成
21                         if(xhr.readyState!==LOADED_STATE){
22                             return;    
23                         }
24                         
25                         //若是服務器返回HTTP狀態碼爲200（成功），執行回調函數
26                         if(xhr.status===OK_STATUS){
27                             callback(xhr.responseText);
28                         }
29                     };
30                     
31                     //觸發Ajax HTTP GET操做
32                     xhr.open("GET",url);
33                     xhr.send();
34                 }
35             }
36             
37             //定義一個函數，依次遍歷還沒有發出的Ajax調用的stack數組，逐一發出Ajax調用
38             function clearStack(){
39                 
40                 //依次遍歷stack數組中的數據項，直至隊列大小爲0（邏輯假值，false）
41                 while (stack.length){
42                     
43                     //使用來自stack數組的數據產生Ajax調用。shift()方法取出數組的第1個數據項並返回此值，同時修改原數組（剔除第1項）
44                     ajax.apply(ajax,stack.shift());
45                 }
46             }
47             
48             //確保clearStack函數在網絡鏈接恢復時立刻執行
49             window.addEventListener("online",clearStack,false);
50             
51             //這樣，你就能夠在代碼中使用ajax()方法發出Ajax調用了，以下所示。代碼清單10-11中的代碼將實現如下功能：
52             //網絡鏈接正常時當即發出Ajax調用， 或等待網絡鏈接恢復正常時在發出。
53             
54             ajax("/my-time-url",function(data){
55                 alert("Received the following data:"+JSON.stringify(data));
56             });
57

10.3.2　　利用Web Storage API長期保持數據

若你的網頁應用程序處於離線狀態，咱們看到了代碼清單10-11如何把原本已經發出的調用緩存起來，一旦網絡鏈接恢復，再繼續發出。然而，對於用戶來講，他們並不清楚這背後的處理狀況。例如，用戶發出的調用是爲了保存我的信息數據，但信息數據並無傳輸到服務器，而只是存儲在了客戶端的內存中。若是用戶在瀏覽器中關閉此標籤頁，則相應的內存數據就會被抹除。這意味着那些相應的調用不再能發送給服務器了。咱們須要一種方法來內存中適當地保存這些緩存起來的調用，即便瀏覽器被關閉了也不受影響。這樣，當用戶在往後從新回到此應用程序時，只是網絡鏈接正常，這些調用還能從緩存中從新發出。

按照之前的作法，咱們能夠經過建立cookie來實現變量緩存。cookie是放在用戶機器的小文件，並隨同每一次的HTTP請求發送服務器。這種作法並不高效———這種相對較大的文件須要隨着每次HTTP請求進行發送，結果就會在較大程度上下降咱們所製做的應用程序的性能。如今咱們能夠利用HTML5 Web Storage API（https://www.w3.org/TR/webstorage/）。此API規範中特別定義了window.sessionStorage和window.localStorage這2個對象。對於前者，sessionStorage，數據的保存時間只能是在用戶瀏覽器使用期間（瀏覽器窗口或標籤頁關閉則失效）。一般，一旦用戶關閉服務器，則全部已保存的數據就會被刪除。另外一方面，對於localStorage對象，可使數據保存時間跨越瀏覽器的生命週期，直至用戶手動刪除或由你的程序控制來刪除。對象提供了3個方法來本地內存塊中以名稱來對相關項目進行獲取，設置，刪除，方法分別爲getItem，setItem和removeItem。代碼清單10-12演示瞭如何使用這些方法來在內存中保存變量，及時在瀏覽器被關閉後依然有效。

代碼清單10-12　　使用Web Storage API來保存數據，即便在瀏覽器被關閉後仍然有效

 1             //檢查以前咱們是否已經以favoriteBrowser爲鍵名來保存數據
 2             var favoriteBrowser=window.localStorage.getItem("favoriteBrowser");
 3             
 4             //若是沒有，彈出輸入提示框，請用戶告訴咱們他們最喜好的網頁瀏覽器
 5             if(!favoriteBrowser || favoriteBrowser===""){
 6                 
 7                 favoriteBrowser=prompt("Which is your favorite web browser?","Google Chrome");
 8                 
 9                 //以localStorage保存用戶最喜好的瀏覽器的名稱，以便在用戶下一次訪問時使用
10                 window.localStorage.setItem("favoriteBrowser",favoriteBrowser);
11             }
12             
13             //告訴用戶咱們知道他們最喜好的瀏覽器是什麼，即便用戶是在前段時間告訴咱們的
14             alert("Your favorite browser is "+favoriteBrowser);
15             
16             //詢問用戶，是否想刪除
17             if(confirm("Would you like us to forget your favorite browser?")){
18                 window.localStorage.removeItem("favoriteBrowser");
19             }

更簡潔寫法

代碼清單10-13　　

 1             //檢查以前咱們是否已經以favoriteBrowser爲鍵名來保存數據
 2             var favoriteBrowser=localStorage["favoriteBrowser"];
 3             
 4             //若是沒有，彈出輸入提示框，請用戶告訴咱們他們最喜好的網頁瀏覽器
 5             if(!favoriteBrowser || favoriteBrowser===""){
 6                 
 7                  localStorage["favoriteBrowser"]=prompt("Which is your favorite web browser?","Google Chrome");
 8                 
 9             }
10             
11             alert("Your favorite browser is "+favoriteBrowser);
12             
13             
14             if(confirm("Would you like us to forget your favorite browser?")){
15                 
16                 delete localStorage["favoriteBrowser"];
17             }

代碼清單10-14　　當網絡鏈接斷開時，把各Ajax調用依次緩存，即便瀏覽器被關閉也能長時間保存

 1             localStorage["stack"]=localStorage["stack"]||[];
 2             
 3             function ajax(url,callback){
 4                 var xhr=new XMLHttpRequest(),
 5                     LOADED_STATE=4,
 6                     OK_STATUS=200;
 7                 
 8                 if(!navigator.onLine){
 9                     
10                     //在localStorage中的數據是以字符串格式存儲的。所以，若要保存結構複雜的數據，如數組或對象
11                     //咱們就須要先把它們轉換爲JSON格式
12                     localStorage["stack"].push(JSON.stringify(arguments));
13                 }else{
14                     xhr.onreadystatechange=function(){
15                         if(xhr.readyState!==LOADED_STATE){
16                             return;
17                         }
18                         if(xhr.status===OK_STATUS){
19                             callback(xhr.responseText);
20                         }
21                     };
22                     xhr.open("GET",url);
23                     xhr.send();
24                 }
25             }
26             
27             function clearStack(){
28                 if(navigator.onLine){
29                     while (localStorage["stack"].length){
30                         
31                         ajax.apply(ajax,JSON.parse(localStorage["stack"].shift()));
32                     }
33                 }
34                 
35             }
36             
37             window.addEventListener("load",clearStack,false);
38             window.addEventListener("online",clearStack,false);

10.3.3　　HTML5 Application Cache

10.4　　響應式（自適應）網頁設計的JavaScript

響應式網頁設計時一項新興技術，用於設計，構架可以自動適應屏幕的網站和應用程序，即根據設備的視看模式，自動調整程序的界面，以適應屏幕的特性。配備着小屏幕的設備（例如智能手機）將顯示出與其適應的合適尺寸規格的用戶界面，對於更加大尺寸的設備亦如是。CSS3 Media Queries可使不一樣樣式風格的應用程序基於當前設備的特性來管理頁面上的各類元素。

在許多狀況下，若是以這項技術對網頁的視覺界面進行更改，則界面行爲的改變也頗有可能隨之發生。

基於當前生效的不一樣CSS3 Media Query規則，可使不一樣的JavaScript代碼執行。使用瀏覽器的window.matchMedia()方法能夠獲悉當前哪一條CSS3 Media Query規則正則生效。經過把整個Media Query語句或部分語句傳給window.matchMedia()，實現與當前顯示特性的對比。此方法返回一個MediaQueryList對象，該對象中含有一個matches屬性。若是此Media Query匹配當前的顯示樣式，則matches屬性會被設置爲true。

若是所應用的Media Query改變了，你將須要從新檢查每一個MediaQueryList對象的matches屬性的狀態。幸運的是，對於絕大多數請求，能夠輕鬆進行處理。方法是，經過瀏覽器窗口的resize事件來進行關聯處理，如代碼清單10-17所示。

代碼清單10-17　　基於CSS3 Media Query來執行特定的JavaScript

 1             //爲不一樣的CSS3 Media Query規則建立相應的對象
 2             var landscapeMQL=window.matchMedia("(orientation:landscape)"),
 3                 smallScreenMQL=window.matchMedia("(max-width:480px)");
 4             
 5             function checkMediaQueries(){
 6                 
 7                 //若是瀏覽器當前的擺放姿態爲橫屏，則執行特定的代碼
 8                 if(landscapeMQL.matches){
 9                     alert("The browser is now in landscape orientation");
10                 }
11                 
12                 //若是瀏覽器窗口的寬度是480px或小於480px，則執行特定的代碼
13                 if(smallScreenMQL.matches){
14                     alert("Your browser window is 480px or narrower in width");
15                 }
16             }
17             
18             //當頁面加載已經瀏覽器窗口的大小發生改變時，或擺放姿態發生改變時，執行以上函數
19             window.addEventListener("load",checkMediaQueries,false);
20             window.addEventListener("resize",checkMediaQueries,false);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。