移动端web app开发备忘

标签: 移动 web app | 发表时间:2014-10-13 22:34 | 作者:SDDCCCC
出处:http://blog.csdn.net

最近要做个手机html5的页面,做些知识储备,重要的点记录下来以备后续。

1.devicePixelRatio:定义设备物理象素和设备独立象素的比例。css中的px可以看作是设备的独立象素,通过devicePixelRatio,就可以知道设备上的一个css像素代表着多少个物理像素,可以考虑devicePixelRatio+rem进行不同设备间的适配;

2.利用Image对象实现图片的懒加载,主要逻辑代码如下:

var len = queue.length;
		var counter = 0;

		for(var i = 0; i < len; i++){
			var img = new Image();
			
			img.src = Zepto(queue[i]).data("url");
			img.onload = function(){
				counter++;
				if(counter >= len){
					Logic.onLoadComplete();
				}
			}
		}
通过new Image()新建Image对象,然后监听其onload事件,当加载完成后进行加载完毕的处理。

3.Zepto.js,专为移动端web开发,更小更轻便,API和jquery类似。中文手册地址:http://www.html-5.cn/Manual/Zepto

4.SVG vs canvas,两种html5的浏览器绘图技术。

SVG所绘制的图像都是dom元素,因此支持事件处理,canvas的每次更新需要重绘;而且svg支持动画和滤镜。

对于动画的实现,canvas是不断的重绘画板,而svg是原生支持的。

作者:SDDCCCC 发表于2014-10-13 22:34:22 原文链接
阅读:109 评论:0 查看评论

相关 [移动 web app] 推荐:

移动端web app开发备忘

- - CSDN博客Web前端推荐文章
最近要做个手机html5的页面,做些知识储备,重要的点记录下来以备后续. 1.devicePixelRatio:定义设备物理象素和设备独立象素的比例. css中的px可以看作是设备的独立象素,通过devicePixelRatio,就可以知道设备上的一个css像素代表着多少个物理像素,可以考虑devicePixelRatio+rem进行不同设备间的适配;.

mobilebone.js-mobile移动web APP单页切换骨架

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4381. 一、mobilebone.js吹牛不打草稿. mobilebone.js是鄙人2014下半年个人开源项目代表作. 先容我吹嘘一番,反正吹牛又不要交税. 跟传统网页浏览的差别仅仅在于无刷新. 例如,我们浏览首页,首页上有个如下HTML链接:.

创建Chrome Web app

- Hobbes - Marshal&#39;s Blog
编写了一个Chrome下使用的Web app. 点击这个应用,就可访问我的博客. 其实有它特殊的好处,直接访问网站,程序无法自动获取HTML5的权限,比如存储限制. 安装应用,相当于安装了一个配置文件,浏览器将打开必要的权限. 如果你也使用Chrome,可以通过这里下载安装. 开发这样的应用并不难,过程类似以前开发Chrome扩展(编写最简单的chrome扩展).

iOS Web App初步

- - 新浪UED
iOS Web App开发,配合HTML5,是目前比较热门的话题. 今天,先抛开HTML5,我们来尝试在PhoneGap框架上进行简单的开发. PhoneGap是一个使用HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台. 它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry等智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能.

对web设计师而言最有价值的20个移动app

- - Web App Trend
如果你经常外出,需要 mobile apps 来帮你完成工作,而不是在长途旅行中消磨时光,那么这篇文章将会对你有用. 我们总结了该行业排名前 20 的 apps. 自从第一部iPad发布以来,该设备一直遭受PC忠实粉丝的抨击,他们声称它仅仅是消费品而已. 任何使用了iPad(或类似的智能手机或平板)的人都知道这是毫无意义的废话.

Chrome移动端用户破10亿:web不死,或将消灭App

- - 雷锋网
今天,谷歌Chrome迎来50版升级,移动端用户破10亿大关. 而在2010年,《连线》杂志刊文称:Web已死. 在那篇封面报道中,《连线》总编辑克里斯·安德森(Chris Anderson)说,这是一个App的时代,到处流行的都是Web大势已去,App才是王道. 在《Web已死》文章中,克里斯·安德森说从诞生到现在,万维网(World Wide Web)已经走过了20多个年头.

Web App和Native App 谁将是未来

- - 互联网旁观者
未来是Web App的天下,还是Native App的天下. 作为设计师,我们是应该努力把客户端的体验提升到最优,还是在网页应用层面上做更多的设计. 那么,我们首先应该立体的认识一下Web App和Native App. Web 无需安装,对设备碎片化的适应能力优于App,它只需要通过XHTML、CSS和JavaScript就可以在任意移动浏览器中执行.

Web app设计浅谈

- Jason - 网易用户体验设计中心博客
HTML5技术的强势发展,为互联网带来的最大改变就是: web从“已死”的预言中回过头来给Native app一记沉重的回马枪,web app成为举世瞩目的明星开始走在各大公司研发的时刻表中. Google 、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.