最新的移动技术开发五大要点总结

1. 双手指滑动事件：

// 双手指滑动事件

XML/HTML code

?

1

2

3

4

5

6

7

8

9

10

11

12

addEventListener('load',　　function(){ window.onmousewheel = twoFingerScroll;},

 

     false            // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)  

);      

 

function twoFingerScroll(ev) {

 

    var delta =ev.wheelDelta/120;        //对 delta 值进行判断(比如正负) ，而后执行相应操作

 

    return true;

 

};

2. link:

XML/HTML code

?

1

<link rel=”apple-touch-startup-image” href=”startup.png” />

 
// 设置开始页面图片

XML/HTML code

?

1

<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/>

// 在设置书签的时候可以显示好看的图标    

XML/HTML code

?

1

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>

  
// 风景模式样式

XML/HTML code

?

1

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

    
// 肖像模式样式

XML/HTML code

?

1

2

3

4

5

<style media="all and (orientation:landscape)" type="text/css">

 

#portrait { display: none; }

 

</style>

 //横屏时使用的样式

XML/HTML code

?

1

2

3

4

5

<style media="all and (orientation:portrait)" type="text/css">

 

#landscape { display: none; }

 

</style>

//竖屏时使用的样式

3. 事件 ： 
 
// 触摸事件

gesturestart          //当两个手指接触屏幕时触发

gesturechange      //当两个手指接触屏幕后开始移动时触发

gestureend

// 手势事件

touchstart            //当手指接触屏幕时触发

touchmove           //当已经接触屏幕的手指开始移动后触发

touchend             //当手指离开屏幕时触发

touchcancel

// 屏幕旋转事件  

onorientationchange     

// 检测触摸屏幕的手指何时改变方向      

orientationchange      

// touch事件支持的相关属性

touches        

targetTouches      

changedTouches             

clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)      

clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)      

screenX　　　 // Relative to the screen       

screenY 　　  // Relative to the screen      

pageX　　 　　// Relative to the full page (includes scrolling)    

pageY　　　　 // Relative to the full page (includes scrolling)    

target　　　　 // Node the touch event originated from     

identifier　　   // An identifying number, unique to each touch event

4. 使用特殊链接：

 如果你关闭自动识别后 ，又希望某些电话号码能够链接到 iPhone 的拨号功能 ，那么可以通过这样来声明电话链接 ,

<a href="tel:[phone]">打电话给我</a>

<a href="sms:12345654321">发短信</a>

 或用于单元格：

<td onclick="location.href='tel:122'">

5. 隐藏地址栏 & 处理事件的时候，防止滚动条出现：

// 隐藏地址栏  & 处理事件的时候 ，防止滚动条出现

XML/HTML code

?

1

2

3

4

5

addEventListener('load', function(){

 

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

 

});