一、HTML5

语意（Semantic）标签
离线&存储（Offline & Storage），包括Local Storage，Indexed DB等
设备访问（Device Access），定位信息，视频、音频流等
网络连接（Connectivity），增加Web Socket
多媒体（Multimedia），增加video、audio标签
图形接口（GDI），增加canvas标签，2D、3D GDI
性能&整合（Performance & Integration），Web Workers实现脚本后台运行，并提供前后台交互接口，XMLHttpRequest2
CSS3，Mozilla Dashboard，html5 presentation

二、HTML

1）移动页面模版

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Mobile Page Standard Template</title>
    <!-- 纠正：user-scalable=no 是需要的，发现在某些设备上仅有 initial 和 maximum 仍然无法阻止缩放 -->
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" name="viewport"/>
    <!-- touch-icon 在 iOS 中用于桌面图标-->
    <link href="http://img01.taobaocdn.com/tps/i1/T1zo51XxXfXXXeOHro-144-144.png" rel="apple-touch-icon-precomposed"/>
    <!-- 从桌面 icon 启动 iOS Safari 是否进入全屏状态（App模式） yes | no-->
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <!-- iOS Safari 全屏状态下的状态栏样式  default | balck | black-translucent-->
    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
    <!-- iOS 设备上禁止将数字识别为可点击的 tel link -->
    <meta content="telephone=no" name="format-detection"/>

    <style type="text/css">
        body {
            margin: 0;
            background-color: #eee;
        }

        .header {
            height: 80px;
            background-color: #b00;
        }

        .body {
            width: 320px;
            margin: 0 auto;
            padding: 10px 0;
            background-color: #aaa;
        }

        .footer {
            height: 80px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="header">移动页面标准模板</div>
<div class="body">
    请查看源码
    <br/>
    1234567
</div>
<div class="footer">页尾</div>
</body>
</html>

2）viewport

<meta content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" name="viewport"/>

查看MDN中的介绍。固定width，动态载入等。推荐阅读《在移动浏览器中使用Viewport元标签控制布局》与《Viewport双城记》

双城记中提到了visual viewport与layout viewport概念。

3）touch-icon

《Everything you always wanted to know about touch icons》

其他属性：

apple-mobile-web-app-capable 从icon启动IOS Safrai是否进入全屏状态
apple-mobile-web-app-status-bar-style IOS Safrai在启动全屏状态下的状态栏样式
format-detection IOS设备上禁止将数字识别为可点击的tel link

三、触屏事件

hammer.js

kissyui

可以看到通用的触屏事件至少包括

滑动(swipe), 方向上下左右
捏(pinch), 常用于放大(zoom in)缩小(zoom out)视图
旋转(rotate), 常用于旋转视图
拖拽(drag)
长按(hold), android和ios都叫long press, 感觉叫hold更形象

点击稍复杂:

android称为touch, 双击是double touch
ios, wp和hammer称为tap, hammer可参考其源码注释
touch这个事件本身分为touchstart/end/move/cancel, 参见spec
少数服从多数, 就叫tap

注: 下表给出是触屏事件中的元事件, 组合事件如: hold+swipe在Android上用在移动桌面图片; 由于组合事件众多, 不一一列出

四、兼容性

1）OS版本碎片化

可以在caniuse上查询各种兼容性。

html5test可以检测当前访问的浏览器对HTML5特性的支持程度。

html5readiness以时间纬度展示所有浏览器HTML5特性的可用性。

关于Polyfill（实现某个特性的兼容性方案）的讨论可以参考文章《html5 cross browser polyfills》。

由google支持的html5rocks.com已经成长为Web新技术交流的中心之一。

几个CSS3在线调试工具：

http://luics.com/cew/code.html

pdf文件下载：

http://download.csdn.net/detail/loneleaf1/8425145

posted on 2015-02-12 18:30 咖啡机（K.F.J）阅读(271) 评论(0) 收藏举报

刷新页面返回顶部

一、HTML5

二、HTML

三、触屏事件

四、兼容性

公告