Mobile Web Development: 针对webkit的HTML, CSS和Javascript

前面有一篇文章介绍了HTML5的一些新特性以及技巧, 现再来总结一些更多的针对webkit的 HTML, CSS和Javascript方面的特性.

HTML

1. 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条

   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

2. 禁用手机号码链接(for iPhone)

   <meta name="format-detection" content="telephone=no">

3. 设置你网页的图标, 尺寸为57px * 57px

   <link rel="apple-touch-icon" href="icon.png"/>

4. iOS 2.0+: tell iOS not to apply any glare effects to the icon

   <link rel="apple-touch-icon-precomposed" href="icon.png"/>

5. iOS 4.2+ icons for different resolutions

   <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
   <link rel="apple-touch-icon" sizes="114×114" href="touch-icon-iphone4.png" />

6. 全屏启动时候的启动画面图像, 尺寸320X460 px

   <link rel="apple-touch-startup-image" href="startup.png">

7. 是否允许全屏显示, 只有在桌面启动时可用

   <meta name="apple-mobile-web-app-capable" content="yes" />

8. 控制全屏时顶部状态栏的外观, 默认白色

   <meta name="apple-mobile-web-app-status-bar-style" content="black" />

9. 取消自动完成, 自动大写单词字母(适用于Mobile上)

   <input autocorrect="off" autocomplete="off" autocapitalize="off">

10. 语音输入

    <input type="text" x-webkit-speech />

11. 文件上传, 从相机捕获媒体

    <input type="file" accept = "image/*; capture=camera" />
    <input type="file" accept = "video/*; capture=camcorder" />
    <input type="file" accept = "audio/*; capture=microphone" />

12. 发送短信给多个人的链接

    <a href="sms:18005555555,18005555556">

13. 发送短信附带内容的链接

    <a href="sms:18005555555?body=Text%20goes%20here">

14. 拨打电话的链接

    <a href="tel:18005555555">Call us at 1-800-555-5555</a>

CSS

1. Mobile上点击链接高亮的时候设置颜色为透明

   -webkit-tap-highlight-color: transparent;

2. 设置为无法选择文本

   -webkit-user-select: none;

3. 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片

   -webkit-touch-callout: none;

4. 全屏模式时的样式(for Desktop)

   :-webkit-full-screen canvas {}

5. 使用mathes来匹配多个选择器

   div p :matches(em, b, strong) {}

6. 指定Mobile设备或者小屏幕桌面屏幕

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

7. 指定高分辨率屏幕设备

   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) {
    header { background-image: url(header-highres.png); }
   }

8. 指定低分辨率屏幕设备

   @media (-webkit-max-device-pixel-ratio: 1.5),(max-resolution: 299dpi) {
    header { background-image: url(header-lowres.png); }
   }

9. CSS3的背景属性

   background-repeat: space;
   background-repeat: round;

10. 计算宽度

    width: calc(100%-40px);

11. 波浪型链接

    text-decoration: #FF8800  wavy ine-through;

12. 收紧字符间的距离

    text-rendering: optimizeLegibility;

13. 设置CSS连字

    font-variant-ligatures: common-ligatures;

14. 旋转90度

    transform: rotate(90);

15. transform-origin可以改变变换的位置

    transform-origin: center center;

16. -webkit-appearance可以改变按钮或者其它控件看起来类似本地的控件

    -webkit-appearance: none;

17. 美化表单校验时的提示样式, 当提示出现时类似于下面的结构

    /* html
    <div -webkit-validation-bubble>
    <div -webkit-validation-bubble-arrow></div>
    <div -webkit-validation-bubble-arrow-clipper></div>
    <div -webkit-validation-bubble-message>Error Message</div>
    </div>
    */
    ::-webkit-validation-bubble {}
    ::-webkit-validation-bubble-message {}
    ::-webkit-validation-bubble-arrow {}
    ::-webkit-validation-bubble-arrow-clipper {}

18. 自定义webkit浏览器的滚动条, 见Google Reader等在Chrome/Safari下的效果, 下面 是一个实例, 这个滚动条的样式代码如下

    ::-webkit-scrollbar {
    width: 12px;
    }
    /* Track */
    ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
    /* Handle */
    ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    }
    ::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4);
    }

19. 设置一个元素的背景或颜色的组合样式

    -webkit-background-composite: plus-darker;

20. 文字添加描边

    -webkit-text-stroke:  1px rgba(0,0,0,0.5);

21. 定义一个图片用来遮罩元素

    -webkit-mask-image:  url(/path/to/mask.png);

22. 定义了一个元素的反射

    -webkit-box-reflect:  below 5px;

23. 定义相对地址的链接样式

    :local-link {font-weight: normal;}

Javascript

1. 隐藏地址栏 window.scrollTo(0,0);
2. 匹配媒体 window.matchMedia();
3. 决定手机是否运行在WiFi/3G等网络 navigator.connection;
4. 决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5) window.devicePixelRatio;
5. 取得网络连接状态 window.navigator.onLine
6. 决定iPhone是否处于全屏状态 window.navigator.standalone;
7. touch事件 (iOS, Android 2.2+)
   • touchstart
   • touchmove
   • touchend
   • touchcancel

8. gesture事件 (Apple only, iOS 2+) - give access to predefined gestures (rotation, scale, position)

   • gesturestart
   • gesturechange
   • gesturend

9. window.orientation属性和orientationchange 事件

   • window.orientation: 0 is portrait, 90 and -90 are landscape

10. devicemotion 事件

    window.addEventListener("deviceorientation", function(e){
     //e.alpha
     //e.beta
     //e.gamma
    }, false);

11. devicemotion 事件

    window.addEventListener("devicemotion", function(e){
     //e.accelerationIncludingGravity.x
     //e.accelerationIncludingGravity.y
     //e.accelerationIncludingGravity.z
    }, false);

12. requestAnimationFrame() 新的动画函数

13. element.webkitRequestFullScreen() 调用全屏函数

扩展阅读

• http://www.slideshare.net/franksvalli/mobile-html-css-and-javascript
• http://css-tricks.com/9130-custom-scrollbars-in-webkit/
• https://developer.mozilla.org/zh-CN/docs