HTML5移动开发技术要点总结及各事件含义
如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ：
1. viewport：
也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，
这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4 个：
width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素）height - // viewport 的高度 （范围从223 到10,000）initial-scale - // 初始的缩放比例 （范围从>0 到10）minimum-scale - // 允许用户缩放到的最小比例maximum-scale - // 允许用户缩放到的最大比例user-scalable - // 用户是否可以手动缩 (no,yes)
<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)" type="text/css">#landscape { display: none; }</style>//横屏时使用的样式<style media="all and (orientation:landscape)" type="text/css">#portrait { display: none; }</style> // 判断屏幕是否旋转function orientationChange() { switch(window.orientation) { case 0: alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case -90: alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case 90: alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); break; case 180: alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); break; };<br>};// 添加事件监听addEventListener('load', function(){ orientationChange(); window.onorientationchange = orientationChange;});// 隐藏地址栏 & 处理事件的时候 ，防止滚动条出现addEventListener('load', function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 100);});// 双手指滑动事件addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;}, false // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段));function twoFingerScroll(ev) { var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ，而后执行相应操作 return true;};// 判断是否为 iPhone ：function isAppleMobile() { return (navigator.platform.indexOf('iPad') != -1);}; 例子 ：（注意数据名称 n 要用引号引起来）var v = localStorage.getItem('n') ? localStorage.getItem('n') : ""; // 如果名称是 n 的数据存在 ，则将其读出 ，赋予变量 v 。localStorage.setItem('n', v); // 写入名称为 n、值为 v 的数据localStorage.removeItem('n'); // 删除名称为 n 的数据 9. 使用特殊链接：
-webkit-border-bottom-left-radius: radius;-webkit-border-top-left-radius: horizontal_radius vertical_radius;-webkit-border-radius: radius; //容器圆角-webkit-box-sizing: sizing_model; 边框常量值：border-box/content-box-webkit-box-shadow: hoff voff blur color; //容器阴影（参数分别为：水平X 方向偏移量；垂直Y 方向偏移量；高斯模糊半径值；阴影颜色值）-webkit-margin-bottom-collapse: collapse_behavior; 常量值：collapse/discard/separate-webkit-margin-start: width;-webkit-padding-start: width;-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;-webkit-appearance: push-button; //内置的CSS 表现，暂时只支持push-button
direction: rtlunicode-bidi: bidi-override; 常量：bidi-override/embed/normal
clip: rect(10px, 5px, 10px, 5px)resize: auto; 常量：auto/both/horizontal/none/verticalvisibility: visible; 常量: collapse/hidden/visible-webkit-transition: opacity 1s linear; 动画效果 ease/linear/ease-in/ease-out/ease-in-out-webkit-backface-visibility: visibler; 常量：visible(默认值)/hidden-webkit-box-reflect: right 1px; 镜向反转-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom,from(transparent), color-stop(0.5, transparent), to(white));-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));; //CSS 遮罩/蒙板效果