webkit

时间:2022-09-02 17:23:49

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

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条

<meta name=”format-detection” content=”telephone=no”]]> 禁用手机号码链接(for iPhone)

<link rel=”apple-touch-icon” href=”icon.png”/> 设置你网页的图标, 尺寸为57X57 px

<!– iOS 2.0+: tell iOS not to apply any glare effects to the icon –>

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

<!– iOS 4.2+ icons for different resolutions –>

<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />

<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />

<link rel=”apple-touch-startup-image” href=”startup.png”> 全屏启动时候的启动画面图像, 尺寸320X460 px

<meta name=”apple-mobile-web-app-capable” content=”yes” /> 是否允许全屏显示, 只有在桌面启动时可用

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> 控制全屏时顶部状态栏的外观, 默认白色

<input autocorrect=”off” autocomplete=”off” autocapitalize=”off”>  取消自动完成, 自动大写单词字母(适用于Mobile上)

<input type=”text” x-webkit-speech /> 语音输入

<input type=”file” accept = “image/*; capture=camera” /> 文件上传, 从相机捕获媒体, 下同

<input type=”file” accept = “video/*; capture=camcorder” />

<input type=”file” accept = “audio/*; capture=microphone” />

<a href=”sms:18005555555,18005555556″]]> 发送短信给多个人 的链接

<a href=”sms:18005555555?body=Text%20goes%20here”]]> 发送短信附带内容 的链接

<a href=”tel:18005555555″]]>Call us at 1-800-555-5555</a]]> 拨打电话 的链接

CSS:

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明

-webkit-user-select: none; 设置为无法选择文本

-webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片

:-webkit-full-screen canvas {} 全屏模式时的样式(for Desktop)

div p :matches(em, b, strong) {} 使用mathes来匹配多个选择器

@media only screen and (max-width: 480px) {} 指定Mobile设备或者小屏幕桌面屏幕

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 300dpi) { 指定高分辨率屏幕设备

header { background-image: url(header-highres.png); }

}

@media (-webkit-max-device-pixel-ratio: 1.5),(max-resolution: 299dpi) { 指定低分辨率屏幕设备

header { background-image: url(header-lowres.png); }

}

background-repeat:  space; background-repeat: round; 这两种CSS3的背景属性值得研究

width: calc(100%-40px); 计算宽度

text-decoration: #FF8800  wavy ine-through; 波浪型链接

text-rendering: optimizeLegibility;用这个属性之后会收紧字符间的距离

font-variant-ligatures:  common-ligatures; 设置CSS连字

transform:  rotate(90); 旋转90度

transform-origin: center center; transform-origin可以改变变换的位置

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

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

1 ::-webkit-validation-bubble {}
2  
3 ::-webkit-validation-bubble-message {}
4  
5 ::-webkit-validation-bubble-arrow {}
6  
7 ::-webkit-validation-bubble-arrow-clipper {}

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

1 <div -webkit-validation-bubble>
2  
3 <div -webkit-validation-bubble-arrow></div>
4  
5 <div -webkit-validation-bubble-arrow-clipper></div>
6  
7 <div -webkit-validation-bubble-message>Error Message</div>
8  
9 </div>

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

 
01 Customized WebKit Scrollbar /* Let´s get this party started */
02  
03 ::-webkit-scrollbar {
04  
05 width12px;
06  
07 }
08  
09 /* Track */
10  
11 ::-webkit-scrollbar-track {
12  
13 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
14  
15 -webkit-border-radius: 10px;
16  
17 border-radius: 10px;
18  
19 }
20  
21 /* Handle */
22  
23 ::-webkit-scrollbar-thumb {
24  
25 -webkit-border-radius: 10px;
26  
27 border-radius: 10px;
28  
29 background: rgba(255,0,0,0.8);
30  
31 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
32  
33 }
34  
35 ::-webkit-scrollbar-thumb:window-inactive {
36  
37 background: rgba(255,0,0,0.4);
38  
39 }

-webkit-background-composite: plus-darker;-webkit-background-composite用来设置一个元素的背景或颜色的组合样式

-webkit-text-stroke:  1px rgba(0,0,0,0.5); -webkit-text-stroke可以用来给文字添加描边

-webkit-mask-image:  url(/path/to/mask.png); 定义一个图片用来遮罩元素

-webkit-box-reflect:  below 5px; 定义了一个元素的反射

:local-link {font-weight: normal;}  local-link可以定义相对地址的链接样式

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)

01 window.addEventListener("orientationchange",function(e){
02  
03 //window.orientation(0 is portrait, 90 and -90 are landscape)
04  
05 }, false);
06  
07 window.addEventListener("deviceorientation",function(e){
08  
09 //e.alpha
10  
11 //e.beta
12  
13 //e.gamma
14  
15 }, false);
16  
17 window.addEventListener("devicemotion"function(e){
18  
19 //e.accelerationIncludingGravity.x
20  
21 //e.accelerationIncludingGravity.y
22  
23 //e.accelerationIncludingGravity.z
24  
25 }, false);

requestAnimationFrame() 新的动画函数

element.webkitRequestFullScreen() 调用全屏函数

webkit的更多相关文章

  1. &lbrack;WebKit内核&rsqb; JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析

    [WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...

  2. 为jQuery添加Webkit的触摸方法支持

    前些日子收到邮件,之前兼职的一个项目被转给了其他人,跟进的人来问我相关代码的版权问题. 我就呵呵了. 这段代码是我在做13年一份兼职的时候无聊加上去的,为jQuery添加触摸事件的支持.因为做得有点无 ...

  3. 运用webkit绘制渲染页面原理解决iscroll4闪动的问题

    原:http://www.iunbug.com/archives/2012/09/19/411.html 已经有不少前端同行抱怨iScroll4的各种问题,我个人并不赞同将这些问题归咎于iScroll ...

  4. 网络天荒地老之UIWebView&amp&semi;WebKit

    UIWebView 是苹果提供的用来展示网页的UI控件,它也是最占内存的控件. iOS8.0之后出现了webkit框架,WKWebView相比UIWebView节省了1/4~1/3的内存,速度快,但是 ...

  5. 解决webkit浏览器中js方法中使用window&period;event提示未定义的问题

    这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...

  6. 【原】如何改变表单元素的外观&lpar;for Webkit and IE10&rpar;

    表单元素在网页设计中使用的非常频繁,如文本输入框.单选框.复选框.选择列表.上传文件,它们在浏览器中的展现有自带的外观,为了在视觉上取得更好的产品体验,保持客户端的统一,通常产品经理会提出需要改变它的 ...

  7. 让那些为Webkit优化的网站也能适配IE10

    特别声明:此篇文章由David根据Charles Morris的英文文章原名<Adapting your WebKit-optimized site for Internet Explorer ...

  8. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  9. 浏览器-04 WebKit 渲染2

    渲染主循环(main loop)和requestAnimationFrame requestAnimationFrame 使用requestAnimationFrame而非setTimeout/set ...

  10. 浏览器-03 WebKit 渲染1

    WebKit是一个渲染引擎,而不是一个浏览器; DOM是对HTML或者XML等文档的一种结构化表示方法,通过这种方式,用户可以通过提供标准的接口来访问页面中的任何元素的相关属性,并可对DOM进行相应的 ...

随机推荐

  1. hdu-2444-二分图判定&plus;最大分配

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  2. C&num; 加密解密文件

    using System; using System.Collections.Generic; using System.Text; using System.Security.Cryptograph ...

  3. msyql 数据库恢复相关

    通过bin日志恢复数据 一.通过bin日志生成 sql #/usr/local/mysql/bin/mysqlbinlog -d dbname --base64-output=DECODE-ROWS ...

  4. &period;NET 向SQL里写入非Text类型

    一般来说,在更新DataTable或是DataSet时,如果不采用SqlParameter,那么当输入的Sql语句出现歧义时,如字符串中含有单引号,程序就会发生错误,并且他人可以轻易地通过拼接Sql语 ...

  5. 沈逸老师ubuntu速学笔记(2)-- ubuntu16&period;04下 apache2&period;4和php7结合编译安装&comma;并安裝PDOmysql扩展

    1.编译安装apache2.4.20 第一步: ./configure --prefix=/usr/local/httpd --enable-so 第二步: make 第三步: sudo make i ...

  6. 第三十九篇、NavBar动态隐藏、设置透明、毛玻璃效果

    1.动态隐藏 - (void)viewDidLoad { [super viewDidLoad]; if ([self respondsToSelector:@selector(automatical ...

  7. java程序练习:x进制转Y进制

    /*X进制到Y进制转换*/ /*Step1.提示用户输入数据的进制X *Step2.接收用户输入的数据,保存到X * Scanner方法 *Step3.接收用户输入X进制的数据,保存到num *Ste ...

  8. &lt&semi;a&gt&semi;标签中href&equals;&quot&semi;javascript&colon;&semi;&quot&semi;

    javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等. 1 <a id="jsPswEdit" class="set ...

  9. JavaSE思维导图&lpar;五&rpar;

  10. HttpClient 教程 &lpar;二&rpar;

    第二章 连接管理 HttpClient有一个对连接初始化和终止,还有在活动连接上I/O操作的完整控制.而连接操作的很多方面可以使用一些参数来控制. 2.1 连接参数 这些参数可以影响连接操作: 'ht ...