web App 开发技术要点总结

[size=large]作为一名前端开发工程师，从桌面浏览器到移动设备上开发过度时总会遇到一些问题，下面我们就从我自己遇到问题开始学习和总结一些技术要点：

1. viewport：
大家在手机web开发中有没有遇到这样一个问题，在pc浏览器中显示正常但是到了手机浏览器中显示却密密麻麻，字体等变得很小掉，看都看不清楚。那是因为没有设置viewport，也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是除去了所有工具栏、状态栏、滚动条等等之后可查看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;[/size]
viewport设置其实很简单，就一个meta

<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

content中参数意思

width              //  viewport 的宽度 （范围从200 到10,000，默认为980 像素） 
height             //  viewport 的高度 （范围从223 到10,000） 

initial-scale      //  初始的缩放比例 （范围从>0 到10） 

minimum-scale     //   允许用户缩放到的最小比例 
maximum-scale     //   允许用户缩放到的最大比例 

user-scalable     //   用户是否可以手动缩 (no,yes) 

[size=large]在设置了initial-scale=1 之后，我们终于可以以1:1 的比例进行页面设计了。关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”，是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。[/size]

[size=large]2.在移动设备中我们网页中的数字会自动识别为电话号码，解决办法也只要设置一个meta就ok，如下：[/size]

<meta content="telephone=no" name="format-detection" /> 

[size=large]3.事件使用
在webapp开发中它包含以下三类触摸事件：
[/size]

// 手势事件 
touchstart            //当手指接触屏幕时触发 
touchmove           //当已经接触屏幕的手指开始移动后触发 
touchend             //当手指离开屏幕时触发 
touchcancel          //当系统停止跟踪触发，关于此类事件的确切触发时间，文档中没有明确说明

// 触摸事件 
gesturestart          //当两个手指接触屏幕时触发 
gesturechange      //当两个手指接触屏幕后开始移动时触发 
gestureend         //离开时触发

// 屏幕旋转事件    
onorientationchange  

[size=large]每个触摸事件都包括了三个触摸列表：[/size]

 
touches：当前位于屏幕上的所有手指的一个列表。
targetTouches：位于当前DOM元素上的手指的一个列表。
changedTouches：涉及当前事件的手指的一个列表。

[size=large]每个触摸对象包含了以下触摸信息：[/size]

clientX / clientY：// 触摸点相对于浏览器窗口viewport的位置  
pageX / pageY：// 触摸点相对于页面的位置  
screenX /screenY：// 触摸点相对于屏幕的位置  
identifier： // touch对象的unique ID 
target：      //DOM元素，是动作所针对的目标。