智能手机Web开发笔记

智能手机版（简称M版）前端开发终于告一段落，第一次做移动端开发，没有想象中那么难搞，但是期间也遇到了各种这样那样的问题，虽然从小日记都不是自己写的，但是开发笔记还是要自己写的，不敢说让别人学习，只是仅以备忘，这算是序了。

关于M版，目前我们只考虑 iphone 跟 android 手机的兼容性，也就是说只需要考虑 webkit 内核的手机浏览器，这样可以放开大胆的使用 HTML5、CSS3 来实现一些效果，完全不用考虑 IE6，甚至连 IE 都不用考虑，这一点对于很多时间都在纠结于各种浏览器兼容性的我们来说具有很大的新鲜感，一个字，很爽，各种爽啊~

废话完了，笔记如下：
1、各种border-radius，box-shadow，-webkit-gradient

只要是能用上的都给用上，还不打折~这样整套下来整个项目的图片基本上就只剩下几个图标了。特别需要提起的是用 border 模拟三角箭头的时候有点意思，这个东西已经出现很多年了，只是限于IE6不能实现 background:transparent 效果而导致没有得到广泛应用，说有点意思是因为我们需要模拟的三角是有边框的，设计师伤不起啊，惹他们不高兴了就给你来各种圆角、各种边框(开个玩笑玩笑，19UED还是相当和谐的~)，最后采用的方法是在模拟的三角里再绝对定位一个 border 小 1px 的三角，算是小技巧吧。
2、样式屏蔽

手机端屏幕都很小，如果要让样式只在手机端显示可以用 media 来控制屏幕样式
<link rel=“stylesheet” href=“m-only.css” media=“only screen and (max-device-width: 480px)” />

通过定义最大设备宽度 only screen and (max-device-width: 480px)（一般手机躺下来的宽度）来屏蔽屏幕比 480px 宽的阅读设备。这样就可以做到将 m-only 中定义的 CSS 样式仅在手机端生效。不过屏蔽其他设备真有必要吗？最后我们的代码里并没有加上这句，而是样式中的宽度都是自适应的。
3、viewport
<meta name=“viewport” content=“width=device-width,minimum-scale=1.0,maximum-scale=1.0″ />

这个属性相当重要，当你发现页面可能没法缩放，甚至连滚动都不行的时候就有可能是没有设置viewport或者设置不对。

viewport的参数：
width: 手机模拟PC浏览器的宽度，然后手机浏览器根据这个宽度把页面同比缩放到手机屏幕上。width:的特殊值device-width的是设备宽度；
height：同width；
user-scalable：是否允许用户缩放，有yes和no两个值；
initial-scale：初始缩放比例；
minimum-scale和maximum-scale:最小和最大缩放比例；

相关文档：
http://learnthemobileweb.com/tag/viewport/
4、position fixed

做过 iphone Web 页面的应该都有遇到过这个问题，手机端的webkit内核浏览器不支持CSS的position: fixed
解释在这里：Doctyper

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
Imagine a book in front of you. Take a piece of paper, cut a 320×416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want Coinstar Money fees to see. This is exactly what Mobile Safari’s viewport is doing. When you flick and scroll, you’re moving the viewport around while the website behind it stays static.

但是我们确实会需要将某些东西固定在页面上的某个位置，目前只有用JS来解决这个问题，给出两个链接，说的很详细了，不做赘述。
相关文档：
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
http://cubiq.org/iscroll

最后由于综合到手机页面的可视区域和实现成本的考虑，我们最终放弃了在页面固定导航区域的设计，所以页面上不会看到相关代码。
5、重力感应

iphone或者android的重力感应游戏蛮有意思，我们的页面上能不能做重力感应的效果呢？通过window.orientation就可以实现，这个属性可以获取到当前页面方向，然后写上对应的操作就可以了，比如
window.onorientationchange = function(){
var orient = Math.abs(window.orientation);
switch ( orient ) {
case 90 :
statement;
break;
case -90 :
statement;
break;
default :
statement;
}
}

window.orientation 有4个值:
０ 正常的竖直方向
-90 默认方向顺时针90°
90 默认方向逆时针90°
180 反向竖直方向，暂时手机还不支持
6、触摸操作

在iphone跟android手机里我们都是通过触摸屏幕来进行各种交互操作，传统的PC端hover操作这里就不存在了(CSS里的hover伪类效果会显示在元素点击后上，而且如果没有再次点击会一直保持)，这样CSS里的hover就可以完全删掉了。

交互操作有两种:

一种是单手指操作触摸，相关事件有 touchstart,touchmove,touchend 和 touchcancel，这几个事件最重要的属性是pageX和 pageY，表示X和Y坐标，发出这些事件的时候监听器会接收到一个event对象，包括touches（触摸对象集合）和targetTouches。

另外一个交互操作就是两个手指的缩放和旋转，相关事件有gesturestart、gestureend 和 gesturechange，事件监听器也会接受到event对象参数，包含 event.scale (缩放比例)和 event.rotate (旋转角度)两个参数,如果我们要旋转，可以配合CSS3 transform 来实现。

相关文档：
http://www.slideshare.net/pp.koch/the-touch-events
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html
7、特殊链接

在PC端里，我们有时候会用到mailto来实现邮件的发送，在手机端里，也有类似的tel和sms来实现拨打电话和发送短信的操作，比如：
<a href=“tel:0571″>电话</a>
<a href=“sms:0571″>短信</a>

另外还有一些其他的特殊链接
如email、google map、YouTube和ihpone中启动iTunes等等，但是这些链接并不需要指定如tel和sms之类的特殊URL模式，只要链接地址符合相应的规则就可以了。



=============== 2011.8.5分割线 ===============
8、添加快捷方式到主屏幕

通过在head标签里添加 <linkrel="apple-touch-icon"href="custom_icon.png"/> 可以在 safari 里添加页面快捷方式至主屏幕，custom_icon.png 为 57px *57px 的PNG图片，经测试图片可以不放在网站根目录下~

另外据说用 apple-touch-icon 并不能解决 android 下默认浏览器的问题（android下需要先添加书签，然后再编辑书签添加到桌面），用自己的破手机测试却没有发现问题……
不过找到了另一个 rel 属性 apple-touch-icon-precomposed，google 到两个的区别就是是否对图标进行二次处理，apple-touch-icon-precomposed 表示的是采用设计原图标，apple-touch-icon 会给图标