WebKit WebApp开发技术要点总结

如果你是一名前端开发者，又希望在移动设备上开发自己的应用，那么WebKit内核的浏览器能够帮助我们实现这一目标。经过一段时间的WebKit WebApp开发实践，现将一些关键技术要点分享给大家。

1. Viewport设置

Viewport即可视区域。对于桌面浏览器，我们很清楚viewport的概念，它是指除去所有工具栏、状态栏、滚动条等之后用于显示网页的区域，这是真正有效的显示区域。由于移动设备屏幕宽度与传统Web不同，因此我们需要调整viewport。

实际上我们可以操作的属性有4个：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

在设置initial-scale=1之后，我们终于可以以1:1的比例进行页面设计了。关于viewport，还有一个重要的概念：iPhone的Safari浏览器完全没有滚动条，而且不是简单的”隐藏滚动条”，而是根本没有这个功能。iPhone的Safari浏览器实际上从一开始就完整显示了整个网页，然后通过viewport查看其中的一部分。当你用手指拖动时，其实拖动的不是页面，而是viewport。浏览器行为的改变不仅体现在滚动条上，交互事件也与普通桌面环境有所不同。

2. Link标签设置

<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>

3. 事件处理

手势事件

• touchstart：当手指接触屏幕时触发
• touchmove：当已经接触屏幕的手指开始移动后触发
• touchend：当手指离开屏幕时触发
• touchcancel：触摸取消事件

触摸事件

• gesturestart：当两个手指接触屏幕时触发
• gesturechange：当两个手指接触屏幕后开始移动时触发
• gestureend：手势结束事件

屏幕旋转事件

• onorientationchange：屏幕旋转事件
• orientationchange：检测触摸屏幕的手指何时改变方向

Touch事件支持的相关属性

• touches：当前触摸点集合
• targetTouches：目标元素上的触摸点集合
• changedTouches：发生变化的触摸点集合
• clientX/Y：相对于视口的坐标（排除滚动偏移）
• screenX/Y：相对于屏幕的坐标
• pageX/Y：相对于完整页面的坐标（包括滚动）
• target：触摸事件起源的节点
• identifier：唯一标识每个触摸事件的编号

4. 屏幕旋转事件处理

添加屏幕旋转事件侦听，可随时发现屏幕旋转状态（左旋、右旋还是未旋转）。示例代码：

// 判断屏幕是否旋转
function orientationChange() {
    switch(window.orientation) {
        case 0:
            console.log("肖像模式 0, screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
        case -90:
            console.log("左旋 -90, screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
        case 90:
            console.log("右旋 90, screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
        case 180:
            console.log("风景模式 180, screen-width: " + screen.width + "; screen-height:" + screen.height);
            break;
    }
}

// 添加事件监听
addEventListener('load', function(){
    orientationChange();
    window.onorientationchange = orientationChange;
});

5. 隐藏地址栏与防止滚动条出现

// 隐藏地址栏 & 处理事件时防止滚动条出现
addEventListener('load', function(){
    setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

6. 双手指滑动事件

// 双手指滑动事件
addEventListener('load', function(){ 
    window.onmousewheel = twoFingerScroll;
}, false);

function twoFingerScroll(ev) {
    var delta = ev.wheelDelta/120;
    // 对delta值进行判断（比如正负），而后执行相应操作
    return true;
}

7. 判断设备类型

// 判断是否为移动设备
function isMobileDevice() {
    return (navigator.platform.indexOf('iPad') != -1) || 
           (navigator.platform.indexOf('iPhone') != -1) || 
           (navigator.platform.indexOf('iPod') != -1);
}

8. localStorage使用

// localStorage操作示例
var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";
// 如果名称为n的数据存在，则将其读出，赋予变量v
localStorage.setItem('n', v); // 写入名称为n、值为v的数据
localStorage.removeItem('n'); // 删除名称为n的数据

9. 特殊链接处理

如果你关闭自动识别后，又希望某些电话号码能够链接到设备的拨号功能，可以通过以下方式声明电话链接：

<a href="tel:12345654321">打电话给我</a>
<a href="sms:12345654321">发短信</a>
<!-- 或用于单元格 -->
<td onclick="location.href='tel:122'"></td>

10. 自动大写与自动修正

要关闭这两项功能，可以通过autocapitalize与autocorrect这两个选项：

<input type="text" autocapitalize="off" autocorrect="off" />

11. WebKit CSS特性

盒模型

• -webkit-border-radius：容器圆角
• -webkit-box-sizing：盒模型 sizing_model（border-box/content-box）
• -webkit-box-shadow：容器阴影效果
• -webkit-border-image：边框图像
• -webkit-appearance：内置CSS表现（push-button）

视觉格式化模型

• direction：文本方向
• unicode-bidi：双向文本处理

视觉效果

• clip：元素裁剪
• resize：调整大小行为
• visibility：可见性控制
• -webkit-transition：过渡动画效果
• -webkit-transform：元素变换（旋转、缩放等）

12. 动画过渡

这是WebKit中最具创新力的特性：使用过渡函数定义动画。

-webkit-animation: title infinite ease-in-out 3s;

animation属性包括：

• -webkit-animation-name：动画名称（keyframes定义的名称）
• -webkit-animation-duration：持续时间
• -webkit-animation-timing-function：过渡类型
• -webkit-animation-delay：动画延迟
• -webkit-animation-iteration-count：循环次数
• -webkit-animation-direction：动画方向

Transform变换类型

• scale(num,num)：缩放
• rotate(*deg)：旋转
• skew(*deg)：倾斜
• translate(,)：位移

动画关键帧示例

@-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 }

补充技巧

1. 锁定Viewport

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

2. 元素点击效果

-webkit-tap-highlight-color: 颜色
// 设置被点击元素的外观变化

3. 设备侦测

// JavaScript侦测
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";
    }
}

// 服务器端侦测
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

4. 阻止旋转时字体大小调整

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

5. iPhone专属CSS

@media screen and (max-device-width: 480px) {
    /* iPhone专属样式 */
}

6. 图片自适应

@media screen and (max-device-width: 480px){
    img {
        max-width:100%;
        height:auto;
    }
}

7. 模拟:hover伪类

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);
}

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

通过以上技术要点的掌握，相信能够帮助前端开发者更好地进行WebKit WebApp的开发，为移动设备用户提供更加优质的Web应用体验。