总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
来源:互联网 发布:淘宝店铺关注人点不开 编辑:程序博客网 时间:2024/05/05 12:32
- <span style="font-size:14px; border:0px; margin:0px; padding:0px">HTML</span>, 从HTML文档的开始到结束排列:
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条
- <meta name=”format-detection” content=”telephone=no”]]> 禁用手机号码链接(for iPhone)
- <meta content=”email=no” name=”format-detection” /> 禁止自动识别邮箱(for andriod)
- <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可以改变按钮或者其它控件看起来类似本地的控件
美化表单校验时的提示样式
- ::-webkit-validation-bubble {}
- ::-webkit-validation-bubble-message {}
- ::-webkit-validation-bubble-arrow {}
- ::-webkit-validation-bubble-arrow-clipper {}
当提示出现时类似于下面的结构
- <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浏览器的滚动条, 见Google Reader等在Chrome/Safari下的效果, 下面是一个实例, 这个滚动条的样式代码如下:
- Customized WebKit Scrollbar /* Let´s get this party started */
- ::-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);
- }
-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可以定义相对地址的链接样式
有些CSS 属性会影响你的渲染,甚至会使你的手机浏览器崩溃。你需要慎重使用的CSS属性: 大片的圆角属性、大片区域的阴影、CSS 渐变 Css代码 -webkit-box-shadow -webkit-border-radius -webkit-gradient 然而位置布局可能会使得你不得不用绝对定位或是相对定位,对于渲染,过多绝对定位或是相对定位的元素,会使得你的浏览器不堪重负而崩溃。这点在mobile safari 上体现的很明显。所以也尽量少使用绝对定位来完成布局。 Css代码 position:absolute position:relative 关于使用css3动画的时尽量利用3D加速,从而使得动画变得流畅。动画过程中的动画闪白可以通过backface-visibility 隐藏。 Java代码 -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden;
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)
- window.addEventListener("orientationchange", function(e){
- //window.orientation(0 is portrait, 90 and -90 are landscape)
- }, false);
- window.addEventListener("deviceorientation", function(e){
- //e.alpha
- //e.beta
- //e.gamma
- }, false);
- window.addEventListener("devicemotion", function(e){
- //e.accelerationIncludingGravity.x
- //e.accelerationIncludingGravity.y
- //e.accelerationIncludingGravity.z
- }, false);
requestAnimationFrame() 新的动画函数
element.webkitRequestFullScreen() 调用全屏函数
click 事件普遍 300ms 的延迟 在手机上绑定click 事件,会使得操作有300ms 的延迟,体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替click 事件,所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成: 当touchstart 开始时,监测是否发生touchmove,根据返回的结果来判断是否在touchend 的时候,执行回调。 或者你可以试试 mike brook 写的thumbs.js 在手机浏览器上a 标签会有一个难看的点击阴影(在andriod上尤其难看)这个阴影可以通过改变CSS 属性 -webkit-tap-highlight 来去掉。
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”,带你了解最新的前端技术。
- 总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
- 总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
- 针对webkit的HTML, CSS和Javascript
- 针对webkit的HTML, CSS和Javascript
- Mobile Web Development: 针对webkit的HTML, CSS和Javascript
- 针对webkit的HTML, CSS和Javascript(记录)
- 关于HTML和Css的一些总结
- 前端面试题....HTML和CSS方面的题....以及一些兼容性问题.....
- HTML, CSS, Javascript和jQuery的一些经验总结
- html css javascript常用的一些笔记
- HTML,CSS,JavaScript的一些小地方
- CSS和html里面的一些按钮 方法总结
- Html的一些特性
- html JavaScript 和css之间的关系总结
- 一些css的特性和‘坑’
- javascript的一些特性
- IE和Firefox在css,JavaScript方面的兼容性
- IE和Firefox在css,JavaScript方面的兼容
- 简述Butterknife示例和原理
- nova-conductor单个进程占用CPU 100%
- linux 性能分析工具
- IOS学习总结,基础控件+简单逻辑+简单功能+GCD。
- UIImageView 加入子UIImageView 导致内存泄露的问题
- 总结一些更多的针对webkit的HTML, CSS和Javascript方面的特性.
- 关于Sphinx引擎的一些想法
- Java 项目打包并且发布
- 如何制作Ubuntu SDK Live USB盘 (15.04 vivid)
- Thread in WIN32 & Linux
- C++实现反射机制
- JAVA锁机制
- 使用 getopt() 进行命令行处理
- 搭建Sphinx-for-chinese引擎时遇到的问题 No fields in schema - will not index.