移动端开发小结

 

1.viewport

viewport就是除去所有工具栏、状态栏、滚动条等等之后网页的可视区域。
移动设备屏幕宽度不同于传统web,因此我们需要改变viewport,有以下属性：

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

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

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

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

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

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

在具体开发的时候，要设置html中，如下：

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

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

3	<meta name=”apple-mobile-web-app-capable” content=”yes” />  // 离线应用的另一个技巧

4	<meta name=”apple-mobile-web-app-status-bar-style” content=black” />  // 隐藏状态栏

5	<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式

6	<meta content="telephone=no" name="format-detection" />       //告诉设备忽略将页面中的数字识别为电话号码</pre>

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

8	<meta name="apple-mobile-web-app-status-bar-style" content="black"> // 隐藏状栏

9

</p>

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

2.样式类

01	<pre><link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片

02	<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标

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

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

05	//竖屏时使用的样式

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

07	#landscape { display: none; }

08

</style>

09	//横屏时使用的样式

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

11	#portrait { display: none; }

12	</style></pre>

13	<pre></pre>

3.方向变化(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，好了就到这里了，洗洗脑袋，充分发挥你的创意吧。

4.触摸事件

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

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核心的浏览器里查看。