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

}

 

未完，待补充。