wap，h5页面

网址：

1：天猫(http://m.tmall.com)

2：淘宝(http://m.taobao.com)

3:京东(http://m.jd.com)

4:网易(http://3g.163.com)

5:百度(http://m.baidu.com)

一：开发环境

　　1：chrome插件user agent switcher，在http://chrome.google.com/webstore下载；

　　2：用公司的wifi，用手机访问电脑ip；

二：头部解析

// 在iPhone 手机上默认值是（电话号码显示为拨号的超链接yes）：设置为no，则不显示为拨号的链接
<meta name="format-detection" content="telephone=no"/> 

// 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 支持性不好
<meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

// iphone设备中网站开启对web app程序的支持；
<meta name="apple-mobile-web-app-capable" content="yes" /> 

// iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）// 在定义了apple-mobile-web-app-capable的前提下才有效
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

// 去除android邮箱识别，在android下没看到啊。。。。。。
<meta name="format-detection" content="email=no"  />　　
<meta name="format-detection" content="address=no"/>

// 该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" /> //android
<link rel="apple-touch-icon" href="iphone_milanoo.png" /> // iphone

// 添加到主屏幕“后，全屏显示,删除默认的苹果工具栏和菜单栏
<meta name='apple-touch-fullscreen' content='yes'>

<meta name="full-screen" content="yes">

 // apple-touch-startup-image是用来标示启动画面的，但它不像apple-touch-icon可以指定sizes来告诉设备该使用哪个图片,所以只能通过media里的设备分辨率的判断值来识别
 <link rel="apple-touch-startup-image" size="640x1096" href=".png" media="(device-height:568px)"/>
 <link rel="apple-touch-startup-image" size="640x920" href=".png" media="(device-height:480px)"/>

// 苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上
// apple-touch-icon-precomposed不会添加添加圆角高光效果，可以自己画图片，apple-touch-icon系统会添加高光和圆角，最好不要用jpg
// 实际只需要做2张图，114和144，57和72分别为一半，可以用一张图
 <link rel="apple-touch-icon-precomposed" sizes="57x57" href=".png"/> // 57×57（默认值）的图标对应320×640的iphone老设备
 <link rel="apple-touch-icon-precomposed" sizes="72x72" href=".png"/> // 72×72对应ipad
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href=".png"/> // 114×114对应retina屏的iPhone及iTouch
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href=".png"/> // ipad3对应144×144的高分辨率。

<link rel=”apple-touch-startup-image” href=”startup.png” /> 　　// 设置开始页面图片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> 　　// 在设置书签的时候可以显示好看的图标
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" /> 　　// 肖像模式样式
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" /> 　　// 风景模式样式
<style media="all and (orientation:portrait)"></style> 　　// 竖屏时使用的样式
<style media="all and (orientation:landscape)"></style> 　　// 横屏时使用的样式

三:页面内容

// 前提是关闭识别<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>

// 这个也是打电话
<span onclick="location.href='tel:122'"></span>

四：

　　4.1：使用-webkit-border-image代替复杂的（圆角+内发光+高光）

　　4.2：将每条数据都放在一个a标签中提升用户体验，尽可能的保证用户的可点击区域较大

　　4.3：div设置为100%，还设置得有border时，会溢出；宽度100%时边框溢出，-webkit-box-sizing:border-box;

　  4.4：android 2.0一下圆角问题；加-webkit-

五：事件看不懂的呢。。。。。。。。

// 手势事件
touchstart　　// 当手指接触屏幕时触发
touchmove    // 当已经接触屏幕的手指开始移动后触发
touchend     // 当手指离开屏幕时触发
touchcancel

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

// 屏幕旋转事件
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

//屏幕旋转事件：onorientationchange
window.orientation  //0 肖像模式，-90 左旋，90 右旋，180 风景模式

六：全屏显示

　　

<div id="320-wrapper" style="width:320px; margin: 0 auto; background: #f00;">
   hahhah
</div>
</body>
<script>
    var clientidth,scale,wrapper;
    wrapper=document.getElementById('320-wrapper');
    window.onresize=function(){
        setZoom();
    }
    function setZoom(){
        clientidth=document.documentElement && document.documentElement.clientWidth || document.body && document.body.clientWidth;
        scale = parseFloat((clientidth-)/);
        wrapper.style.zoom = scale;
    }
    document.addEventListener('DOMContentLoaded',function(){
        setZoom()
    },false)
</script>

二：h5页面