移动端的HTML5开发课件

移动端的HTML5开发Author:QQ:微博:目录?成为历史的WAP开发技术?HTML5埋下的坑?CSS3实现高级样式效果?需要理解的Javascript知识点?调试?优化和压缩成为历史的wap技术?低端机?有限的标签?有限的css?无脚本成为历史的wap技术但是，依然有大量非iOS或Android的机器HTML5埋下的坑这是业界笼统的概念，对我们来说是指高级的html，高级的css和高级的js。浏览器支持情况：HTML5埋下的坑W3C公布的HTML5主要功能：?通信相关（WebSockets,Server-SentEvents等等）?CSS3样式?设备定位功能（取得地理位置信息等等）?3D以及画面显示效果（WebGL,CSS3的3D功能等等）?多媒体（Audio/Video等等）?性能及功能性的提高（WebWorkers,XHR2等等）?语义性（Microdata微数据等等）?离线及本地存储（AppCache,本地存储，IndexedDB等等）HTML5埋下的坑DTD和META：width-viewport的宽度 height-viewport的高度 initial-scale-初始的缩放比例 minimum-scale-允许用户缩放到的最小比例 maximum-scale-允许用户缩放到的最大比例 user-scalable-用户是否可以手动缩放 user-scalable:no是实现position:fixed的关键HTML5埋下的坑移动端常用的HTML5标签：header,nav,article,section,aside,footer,time,canvas,audio,video,source PC:iOS:Android:PC iOS AndroidHTML5埋下的坑移动端的html5表单控件：?iOS6才开始支持，Android都支持?iOS5及以上开始支持inputtype:date,datetime，month，time，range但是week还不支持?Android支持情况各有差异，通常就?tel和search类型支持较好HTML5埋下的坑移动端的html5表单控件在iOS6上的情况：HTML5埋下的坑移动端的html5表单控件tel、number、search的效果：telnumbersearch移动端端CSS3主要特点：?可以只针对webkit内核浏览器编写，支持常见css3效果?屏幕小，最常见屏幕宽度是320px(iPhone和大部分Android)、360px(小米2)、480px、768px，较老的Android手机有240px的?有第三方浏览器，如UC浏览器、QQ浏览器存在?Android品种繁多，适配麻烦，css3效果与iOS差异大，表单控件处理常需要借助js来hack移动端端CSS3移动端端CSS3必须重视的css差异：?固定定位(position:fixed),iOS和Android都支持得不好,Android禁用掉页面缩放功能(viewport中设置user-scalable=no)，但iOS5以下系统无效?局部滚动(overflow:scroll),overflow也非常不好使，iOS5以下系统无效，iOS5及以上可以勉强使用 于是才有了iScroll.js的模拟滚动 -webkit-overflow-scrolling:touch;overflow:auto;移动端端CSS3CSS3MediaQueries：?在css中使用mediascreenand(max-device-width:480px).classbackground:#ccc;?在link中使用（注意：即使不符合条件也会加载文件）mediascreenand(max-width:600px).classbackground:#ccc;移动端端CSS3CSS3MediaQueries：?多个MediaQueries?针对高清屏幕（视网膜屏幕）-webkit-min-device-pixel-ratio:2)type=text/css?设备横竖状态 media screen and(min-width:600px)and(max-width:900px),only screen and(min-device-width:768px)and(max-device-width:1024px).class background:#ccc;移动端端CSS3一些有用的css归纳：去掉点击链接和文本框对象的半透明覆盖层(iOS)或者虚框(Android):-webkit-tap-highlight-color:rgba(0,0,0,0);/慎重使用，可能会给Android表单控件带来巨大麻烦禁用长按页面时的弹出菜单(iOS下有效):-webkit-touch-callout:none;禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化):-webkit-text-size-adjust:none;禁止页面文字选择:-webkit-user-select:none;局部滚动(仅iOS5以上支持):-webkit-overflow-scrolling:touch;转变盒模型(width定义变为包含paddingborder-width,不含margin):-webkit-box-sizing:border-box;消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式:-webkit-appearance:none;移动端端CSS3关于background-szie：background-size:xy;/值是横轴纵轴background-size:100%;/等比例让x轴占满该容器，y轴可能没有占满background-size:50px80%;background-size:cover;/等比例占满容器，按照图片小的那边铺满background-size:contain;/等比例缩小background-size:auto;/保持原样，不拉伸压缩图片大小举例：http:/http:/ Fiddler2?打开Fiddler，选择工具栏 ToolsFiddlerOptions Connections 中勾选AllowRemoteComputerstoConnect?查看自己台式机的 IP地址，如192.168.0.7?把iOS设备连接到和台式机在同一个局域网的 wifi，打开iOS的wifi设置，进入当前 wifi连接，设置HTTP代理Group，将服务器填为上一步中获得的台式机 IP，即192.168.0.7，端口填8888(和Fiddle设置中一致即可)?完成上述操作后，重启 Fiddler，然后在Fiddler中就可以捕捉到 iOS设备的http请求了?如果要转发请求，在主界面的 AutoResponder 选项卡中添加转发规则(支持正则表达式匹配)?有的android手机无法设置代理，但是一般比较新的都可以设置。小米手机是典型的可以的。?下载地址：http:/ 调试在移动端使用Fiddler抓取http请求数据：PC上的fiddler截图优化和压缩良好的js加载方式：.优化和压缩慎重使用的css选择器：*号选择器，据说性能非常差(中枪了)属性选择器，如div_href=“http:/”伪类选择器，如li:first-of-type后代选择器，如.testdiv优化和压缩慎重使用的css3效果：?大范围的阴影效果，box-shadow?大范围的渐变，-webkit-gradient?大量的圆角元素，border-radius?复杂的动画优化和压缩良好的js加载方式：所有的JS文件压缩合并成一个文件在页面顶部异步引入，可以使用两种方式（方法2的兼容性比较好）:vars=document.createElement(script);s.src=test.js;document.getElementsByTagName(head)0.appendChild(s);（async和动态创建JS方式不能保证多个JS文件的执行顺序）不重要的JS文件可以在页面最底部使用引入并且不会阻塞页面渲染，但是页面底部的外链文件会推迟DOMContentLoad事件，所以页面中的JS最好全部使用异步加载方式。优化和压缩推荐使用grunt.js进行代码合并压缩：Gruntjs是JavaScript项目的构建工具，也是基于node的一个命令行工具。很多开源JS项目都是使用它搭建。如jQuery、Qunit等我们关心的功能：?合并js、css文件?压缩js、css文件?压缩html优化和压缩grunt.js的安装：安装过程视网络情况，可能耗时较长。安装nodejs，现在官网下载的nodejs会自动装上npm?安装grunt命令行工具grunt-cli?安装grunt及其插件安装过程可以参考网络上的文章：http:/ Knowledge Review Review