前端小記5--移動開發常識

1.手機瀏覽器經常使用手勢

手指接觸屏幕：touchstart

接觸屏幕後移動：touchmove(能夠經過event.preventDefault()來阻止滾動)

離開屏幕： touchend

當系統中止跟蹤觸摸時觸發：touchcancel

上面這幾個事件都會冒泡，也均可以取消。

被觸摸位置的一些重要屬性：

touches：表示當前跟蹤的觸摸操做的 Touch 對象的數組。
targetTouchs：特定於事件目標的 Touch 對象的數組。 
changeTouches：表示自上次觸摸以來發生了什麼改變的 Touch 對象的數組。 每一個 Touch 對象包含下列屬性。 
clientX：觸摸目標在視口中的 x座標。 
clientY：觸摸目標在視口中的 y座標。 
identifier：標識觸摸的惟一 ID。 
pageX：觸摸目標在頁面中的 x座標。 
pageY：觸摸目標在頁面中的 y座標。 
screenX：觸摸目標在屏幕中的 x座標。 
screenY：觸摸目標在屏幕中的 y座標。 
target：觸摸的 DOM節點目標。 使用這些屬性能夠跟蹤用戶對屏幕的觸摸操做。

touch、mouse和click事件觸發順序：touchstart》mouseover》mousemove》mousedown》mouseup》click》touchend

2.觸摸事件

手勢事件分爲三種：

（1）gesturestart：當一個手指已經按在屏幕上，另外一個手指又觸摸屏幕的時候觸發。相似於touchstart的做用同樣； 

（2）gesturechange：當觸摸屏幕的任何一個手指的位置發生變化的時候觸發。

（3）gestureend：當任何一個手指從屏幕上面移開時觸發

3.屏幕旋轉

經過 onorientationchange判斷。

判斷手機橫、豎屏方法：

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {

    if (window.orientation === 180 || window.orientation === 0) {

        // 豎屏

    }

    if (window.orientation === 90 || window.orientation === -90) {

        // 橫屏

     }

}, false);

對應設置CSS：

@media all and (orientation : landscape) {

   // 橫屏

}

@media all and (orientation : portrait) {

   // 豎屏

}

4.檢測手機屏幕什麼時候改變方向

orientationchange，這個事件是蘋果公司爲safari中添加的。以便開發人員可以肯定用戶什麼時候將設備由橫向查看切換爲縱向查看模式。在設備旋轉的時候，會觸發這個事件。

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

    alert(window.orientation);

},  false );

orientation有三個值：0， 90，-90

0爲豎屏模式（portrait），-90意味着該設備橫向旋轉到右側的橫屏模式（landscape），而90表示該設備是橫向旋轉到左邊的橫屏模式（landscape）。

判斷屏幕旋轉：

function orientationChange() {

  switch(window.orientation) {

     case 0:

              alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height)

              break;

     case -90:

              alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);

              break;

     case 90:

              alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height);

              break;

     case 180:

               alert("風景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);

                break;

  }

}

並添加監聽事件

addEventListener('load', function(){

  orientationChange();

  window.onorientationchange = orientationChange;

});

Ps:阻止屏幕旋轉時自動調整字體大小：

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

5.在地址欄被隱藏和事件處理的時候

addEventListener('load', function(){

  orientationChange();

  setTimeout(function(){ window.scrollTo(0, 1); }, 100);

});

6.兩指操做判斷

addEventListener('load', function(){

  window.onmousewheel = twoFingerScroll;

}, false);

function twoFingerScroll(ev) {

  var delta =ev.wheelDelta/120; //對 delta 值進行判斷(好比正負) ，然後執行相應操做

  return true;

}

7.對iPhone的判斷

funciton isAppleMobile() {

    return (navigator.platform.indexOf('iPad') != -1);

}

同時，下面的方法是iPhone才識別的css

@media screen and (max-device-width: 480px) {}

 

8.大圖縮小顯示

對於網絡大圖，若代碼限制了縮放，在iPhone上爲避免超過邊界，可調整CSS：

@media screen and (max-device-width: 480px) {

   img{max-width: 100%;height:auto;}

}

 

未完，待補充。