前端小记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;}

}

 

未完，待补充。