webkit webApp 开发技术要点总结 - -小克(4)_H5之家 - 中国HTML5教程资源分享第一站

这些同样是可以简写的。但真正让我觉的很爽的是keyframes，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)。简单点说，只要你有想法，你想让元素在这个过程中以什么样的方式改变都是很简单的。

-webkit-transform: 类型（缩放scale/旋转rotate/倾斜skew/位移translate）

scale(num,num) 放大倍率。scaleX 和 scaleY(3)，可以简写为：scale(* , *)

rotate(*deg) 转动角度。rotateX 和 rotateY，可以简写为：rotate(* , *)

Skew(*deg) 倾斜角度。skewX 和skewY，可简写为：skew(* , *)

translate(*,*) 坐标移动。translateX 和translateY，可简写为：translate(* , *)。

实现模拟弹出消息框（Alert）的例子：
①定义过渡（在<style type="text/css">段中描述keyframes）：

@-webkit-keyframes DivZoom

{

0% { -webkit-transform: scale(0.01) }

60% { -webkit-transform: scale(1.05) }

80% { -webkit-transform: scale(0.95) }

100% { -webkit-transform: scale(1.00) }

}

.sZoom { -webkit-animation: DivZoom 0.5s ease-in-out }

（很容易看懂，将元素从缩小的0.01 倍--很小但不能为0 倍，放大到1.05 倍，再缩小到0.95倍，最后到1 倍即正常大小。整个过渡过程事件为0.5 秒，动画方式为ease-in-out，即慢到快再到慢，默认只进行1 次过渡。这正是大家经常看到的 iPhone 弹出的提示信息的动画效果！）
②定义元素（在<body>段中）：

<div>

<input type="button" value="确认"

style="width: 100%; height: 40px; font-size: 14pt; ont-weight: bold;

color: #FFFFFF; text-shadow: 0px -1px 1px #000;"

onclick=" layerH.style.visibility='hidden'">

</form>

</div>

③启动动画（在 javascript 定义的函数中）

function pHelp()

{

layerH.style.visibility = 'visible'

layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms"

layerH.className = 'sZoom'

}

(这个启动函数就很好理解了。但是为什么要使用-webkit-animation-delay 这句呢？因为当一个元素过渡显示完成后，若其样式没有变化，下一次将无法进行过渡动画显示。我们巧妙的利用其动画延迟时间定义，使其有所变化，就避免了上述问题。其中使用随机数函数Math.random()，产生一个大于0 小于1 的随机数。当然，延迟零点几毫秒，用户是不会察觉的。)

补充：
1. 锁定 viewport

ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。

2. 被点击元素的外观变化，可以使用样式来设定：

-webkit-tap-highlight-color: 颜色

3. 侦测iPhone/iPod
开发特定设备的移动网站，首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA，然后转向到专属的URL。

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {

　　if (document.cookie.indexOf("iphone_redirect=false") == -1) {

　　　　window.location = "http://m.example.com";

　　}

虽然Javascript是可以在水果设备上运行的，但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输，所以下面是服务器端侦测和转向：

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {

　　header('Location: ');

　　exit();

}

4. 阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

5. iPhone才识别的CSS
如果不想设备侦测，可以用CSS媒体查询来专为iPhone/iPod定义样式。

@media screen and (max-device-width: 480px) {}

6. 缩小图片
网站的大图通常宽度都超过480像素，如果用前面的代码限制了缩放，这些图片在iPhone版显示显然会超过屏幕。好在iPhone机能还够，我们可以用CSS让iPhone自动将大图片缩小显示。

@media screen and (max-device-width: 480px){

　　img{max-width:100%;height:auto;}

}

7. 模拟:hover伪类
因为iPhone并没有鼠标指针，所以没有hover事件。那么CSS :hover伪类就没用了。但是iPhone有Touch事件，onTouchStart 类似 onMouseOver，onTouchEnd 类似 onMouseOut。所以我们可以用它来模拟hover。使用Javascript：

var myLinks = document.getElementsByTagName('a');

for(var i = 0; i < myLinks.length; i++){

　　myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);

　　myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);

}

然后用CSS增加hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接，感觉可以更像按钮。并且，这个模拟可以用在任何元素上。