移动端开发小结

1. viewport

viewport：除去所有工具栏、状态栏、滚动条等之后用于查看网页的区域，打个比方，现在有一张报纸摆在你面前，但是这张报纸被一本书压住了，所以你只能看到报纸的一部分，这部分可以查看到的区域就是可视区域，这就是viewport。

在进行webapp开发时，允许你更改这个viewport，你可以让你的页面宽高恰好等于浏览器的viewport，这样你进行的设计就可以转化成1:1了。
下边就从它的属性开始讲起：

1	//设置可视区域viewport的宽高和比例

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

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

4	height - // viewport 的高度 （范围从223 到10,000）

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

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

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

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

在HTML代码中，通过<meta>进行控制。

1	<meta charset="utf-8" />//编码

2	//指定的iphone中safari顶端的状态条的样式

3	<meta content="black" name="apple-mobile-web-app-status-bar-style" />

4	//告诉设备忽略将页面中的数字识别为电话号码</pre>

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

6	//隐藏地址栏（只有从主屏幕打开时生效）

7	<meta name="apple-mobile-web-app-capable" content="yes">

8	//保存到主屏默认的标题

9	<meta name="apple-mobile-web-app-title" content="标题">

一旦设置了，在设计的时候就可以1:1的方式来设计页面了，不会有滚动条。

2. 创建桌面图标和启动画面

苹果ios 系统从4.2开始就支持apple-touch-icon属性,在meta标签中指定它的值可以使得你的网页在保存至主屏时，显示为自定义的icon，而不是网页的缩略图。

1	<link rel="apple-touch-icon" href="/custom_icon.png"/>

2	<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

3	<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

4	<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

苹果提供了sizes这个属性，为了方便适应多设备。而如果你不指定这个属性，默认size 会是57 * 57大小。另外对应 apple-touch-icon 苹果还有另外一个属性 apple-touch-icon-precomposed 他们的不同之处就是，但使用 apple-touch-icon-precomposed 属性的时候，苹果不会给桌面图标加一个高光效果。

苹果系统3.0以后就支持 Startup Image 属性，webapp 在苹果手机上可以给网页声明StartUp Image ，使得当webapp 从主屏打开时，会有一张封面图片，很类似原生app。但是被声明的图片对于iphone和itouch 大小只能是 320 x 460 ，其他大小的都无效。但是同样你可以通过sizes 来进行多设备适配。

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

2	//for iphone Retina Display high

3	<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

4	//for iPad Landscape

5	<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

6	//for iPad Portrait

7	<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

3. 横屏和竖屏样式设置

01	<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 肖像模式样式

02	<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" // 横屏模式下的样式

03	//竖屏时使用的样式

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

05	#landscape { display: none; }

06

</style>

07	//横屏时使用的样式

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

09	#portrait { display: none; }

10

</style>

4.脚本监听方向变化(orientationchange)

手机查看模式一般有两种，a.肖像模式 b.横屏模式，在webkit内核浏览器中，我们可以通过事件来监听手机是否改变了查看模式。在脚本中可以通过window.orientation访问。

1	EventUtil.addHandler( window, 'load', function( event ) {

2	var div = document.createElement('myDiv');

3	div.innerHTML = 'Current orentation is' + window.orientation;

4	document.body.appendChild( div );

5	EventUtil.addHandler( window, 'orientationchange', function( event ) {

6	div.innerHTML = 'Current orentation is' + window.orientation;

7

});

8

});

在你的手机端访问http://classjs.com/demo/phone/03/orient.html，切换两种方式来查看该网页，试试效果吧。
是不是很奇妙，肖像模式为：0，横向模式为：90，好了就到这里了，洗洗脑袋，充分发挥你的创意吧。

5.触摸事件

当用户手指放在屏幕上面时，在屏幕上滑动时或从屏幕上移开时会触发一些相关事件，这类事件称之为触摸事件，有以下几个：

1	touchstart //当手指触摸屏幕时触发，即使已经有一个手指放在了屏幕上也会触发

2	touchmove //当手指在屏幕上滑动时连续的触发

3	touchend //当手指从屏幕上移开时触发

4	touchcancel //当系统停止跟踪触发是触发，关于此类事件的确切触发时间，文档中没有明确说明

上面这几个事件都会冒泡，也都可以取消，每个触摸事件的event对象都提供了在鼠标事件中常见的属 性：bubbles,cancelable,view,clientX,clientY,screenX,screenY,detail,altKey,ctrlKey,shiftKey,metaKey
除了常见的DOM属性外，触摸时间还包含下列3个用于跟踪触摸属性：

1	touches // 表示当前跟踪的触摸操作的Touch对象的数组

2	targetTouches // 特定与事件目标的Touch对象的数组

3	changeTouches // 表示自上次触摸以来发生了什么改变的Touch对象的数组

每个触摸对象包含下列属性：

1	clientX // 触摸目标在视口中的X坐标

2	clientY // ~Y坐标

3	identifier // 标识触摸唯一ID

4	pageX // 触摸目标在页面中的X坐标

5	pageY //~Y坐标

6	screenX //触摸目标在屏幕中的X坐标

7	screenY // ~Y坐标

8	target //触摸的DOM节点目标

关于触摸目标可以看看这个http://classjs.com/demo/phone/03/touchdetail.html,对了别忘了在手机端的webkit核心的浏览器里查看。

6. 去除链接的点击阴影

1	html,body{-webkit-tap-highlight-color:rgba(0,0,0,0)}

7. 尽量弃用click

在手机上绑定click 事件，会使得操作有300ms 的延迟，体验并不是很好。在用js绑定click的时候尽量用tap事件代替，可以采用第三方的触摸库来解决。

8. css尽量少用position的绝对和相对定位

对于渲染，过多绝对定位或是相对定位的元素，会使得你的浏览器不堪重负而崩溃。这点在mobile safari 上体现的很明显。所以也尽量少使用绝对定位来完成布局

9. css3动画闪烁问题

关于使用css3动画的时尽量利用3D加速，从而使得动画变得流畅。动画过程中的动画闪白可以通过backface-visibility 隐藏。

1	-webkit-transform-style: preserve-3d;

2	-webkit-backface-visibility: hidden;

10. 如何检测用户是否从主屏启动webapp

iOS中浏览器直接访问站点时，navigator.standalone属性为false，从主屏启动webapp时，navigator.standalone属性为true。

11. 关闭键盘大小写

移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。

12. 获取滚动条的值

在android中可以通过正常的document.documentElement.scrollTop和scrollLeft获取到滚动条的值，但是在ios中没有滚动条的概念，如果非要获取则使用window.scrollY和scrollX。

13. 动画方式隐藏头部地址栏

在Android和ios下都起作用

1	document.addEventListener('DOMContentLoaded', function() {

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

3	}, false);