针对webkit的HTML, CSS和Javascript

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

HTML, 从HTML文档的开始到结束排列:

1. <metaname=”viewport”content=”width=device-width,initial-scale=1.0″/>
2. <!--让内容的宽度自适应为设备的宽度,在做MobileWeb时必须加的一条-->
3. <metaname=”format-detection”content=”telephone=no”]]>
4. <!--禁用手机号码链接(foriPhone)-->
5. <linkrel=”apple-touch-icon”href=”icon.png”/>
6. <!--设置你网页的图标,尺寸为57X57px-->
7. <!–iOS2.0+:telliOSnottoapplyanyglareeffectstotheicon–>
8. <linkrel=”apple-touch-icon-precomposed”href=”icon.png”/>
9. <!–iOS4.2+iconsfordifferentresolutions–>
10. <linkrel=”apple-touch-icon”sizes=”72×72″href=”touch-icon-ipad.png”/>
11. <linkrel=”apple-touch-icon”sizes=”114×114″href=”touch-icon-iphone4.png”/>
12. <linkrel=”apple-touch-startup-image”href=”startup.png”>
13. <!--全屏启动时候的启动画面图像,尺寸320x460px-->
14. <metaname=”apple-mobile-web-app-capable”content=”yes”/>
15. <!--是否允许全屏显示,只有在桌面启动时可用-->
16. <metaname=”apple-mobile-web-app-status-bar-style”content=”black”/>
17. <!--控制全屏时顶部状态栏的外观,默认白色-->
18. <inputautocorrect=”off”autocomplete=”off”autocapitalize=”off”>
19. <!--取消自动完成,自动大写单词字母(适用于Mobile上)-->
20. <inputtype=”text”x-webkit-speech/>
21. <!--语音输入-->
22. <inputtype=”file”accept=“image
24. -webkit-user-select:none;
27. -webkit-touch-callout:none;
30. :-webkit-full-screencanvas{}
33. divp:matches(em,b,strong){}
36. @mediaonlyscreenand(max-width:480px){}
39. @media(-webkit-min-device-pixel-ratio:2),(min-resolution:300dpi){}
41. header{background-image:url(header-highres.png);}
42. }
44. @media(-webkit-max-device-pixel-ratio:1.5),(max-resolution:299dpi){}
46. header{background-image:url(header-lowres.png);}
47. }
49. background-repeat:space;background-repeat:round;
52. width:calc(100%-40px);
55. text-decoration:#FF8800wavyine-through;
58. text-rendering:optimizeLegibility;
61. font-variant-ligatures:common-ligatures;
64. transform:rotate(90);
67. transform-origin:centercenter;transform-origin
70. -webkit-appearance:none;-webkit-appearance

美化表单校验时的提示样式

1. -webkit-validation-bubble{}
2. -webkit-validation-bubble-message{}
3. -webkit-validation-bubble-arrow{}
4. -webkit-validation-bubble-arrow-clipper{}

当提示出现时类似于下面的结构

1. <div-webkit-validation-bubble>
   
2. <div-webkit-validation-bubble-arrow></div>
3. <div-webkit-validation-bubble-arrow-clipper></div>
   
4. <div-webkit-validation-bubble-message>ErrorMessage</div>
5. </div>

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

1. CustomizedWebKitScrollbar
2. ::-webkit-scrollbar{
3. width:12px;
4. }
6. ::-webkit-scrollbar-track{
7. -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
8. -webkit-border-radius:10px;
9. border-radius:10px;
10. }
13. ::-webkit-scrollbar-thumb{
14. -webkit-border-radius:10px;
15. border-radius:10px;
16. background:rgba(255,0,0,0.8);
17. -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
18. }
19. ::-webkit-scrollbar-thumb:window-inactive{
20. background:rgba(255,0,0,0.4);
21. }
22. -webkit-background-composite:plus-darker;-webkit-background-composite
25. -webkit-text-stroke:1pxrgba(0,0,0,0.5);-webkit-text-stroke
28. -webkit-mask-image:url(/path/to/mask.png);
31. -webkit-box-reflect:below5px;
34. :local-link{font-weight:normal;}

Javascript:

window.scrollTo(0,0); 隐藏地址栏

window.matchMedia(); 匹配媒体

navigator.connection; 决定手机是否运行在WiFi/3G等网络

window.devicePixelRatio; 决定屏幕分辨率(iPhone 4值为2, 而Nexus One值为1.5)

window.navigator.onLine; 取得网络连接状态

window.navigator.standalone; 决定iPhone是否处于全屏状态

touch事件 (iOS, Android 2.2+): touchstart, touchmove, touchend, touchcancel

gesture事件 (Apple only, iOS 2+): gesturestart, gesturechange, gesturend give access to predefined gestures (rotation, scale, position)

1. window.addEventListener("orientationchange",function(e){
   
2. //window.orientation(0isportrait,90and-90arelandscape)
   
3. },false);
5. window.addEventListener("deviceorientation",function(e){
   
6. //e.alpha
   
7. //e.beta
   
8. //e.gamma
   
9. },false);
   
10. window.addEventListener("devicemotion",function(e){
    
11. //e.accelerationIncludingGravity.x
12. //e.accelerationIncludingGravity.y
    
13. //e.accelerationIncludingGravity.z
14. },false);

requestAnimationframe() 新的动画函数

element.webkitRequestFullScreen() 调用全屏函数