现在在ios/android上的web网站变的越来越多,智能机中ios和android系统的设备市场份额也是与日俱增,相信未来会是一个趋势,那么如何构建基于webkit的网站呢?

这里有一篇文章介绍了如何用html5创建一个iphone的app,这是一个基于web的本地离线应用,相对于native应用来说基于web的应用开发和测试都非常快捷,基于webkit浏览器支持大部分的html5,也支持大部分的css3,而且开发语言也是大多数web工程师所熟悉的,最重要的一点是基于web的应用是完全跨平台的,不需要多平台的开发和测试。

开发基于webkit的web app/page时需要注意的有:

HTML特性:

<input type=”file” />在iphone上不work

<a href=”13888888888″>Call Me</a>可以调用打电话应用

google maps, iTunes和youtube的链接会在iphone上打开相应的组件

app/web page设置:

<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> 在设置书签的时候可以显示好看的图标

<meta name=”apple-mobile-web-app-capable” content=”yes” /> 离线应用的另一个技巧

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> 隐藏状态栏

<link rel=”apple-touch-startup-image” href=”startup.png” /> 设置开始页面图片

<meta name=”viewport” content=”width=device-width, user-scalable=no” /> 指定mobile,并且不可缩放

<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ /> 同上

CSS相关配置:

@media screen and (max-device-width: 480px){
/* 小屏幕的css样式 */
}

@media screen and (max-width: 320px){
/* 纵向的css样式 */
}

@media screen and (max-width:480px){
/* 横向的css样式 */
}

@media screen and (orientation: portrait){
/* iPad 纵向的css样式 */
}

@media screen and (orientation:landscape){
/* iPad 横向的css样式 */
}

display: -webkit-box; -webkit-box-orient:vertical/horizontal; -webkit-box-flex: value 水平垂直布局box

rounded corner/text shadow/box shadow/rgba/font-face/transform/transition/animation/border-image/gradients/ 充分利用这些css3的特性做出丰富的UI

脚本特性:

可以选用开源的javascript库,如yui, jquery, mootools, dojo …

垂直的js库,如canvas游戏库有LimeJs, GameJs等,Mobile UI库如jquery mobile, sencha touch, iui等,以及其它各种库

隐藏标题栏 – addEventListener(“load”, function() { setTimeout(function (){ window.scrollTo(0,1);}, 0); }, false);

webkitTransitionEnd/webkitAnimationStart/webkitAnimationIteration/webkitAnimationEnd transition/animation事件

localstorage/manifest 离线应用

模拟iphone的scroll效果,解决Mobile Safari下不支持position:fixed的问题:touch scrolldemo

调试:

safari上可以设置user agent为iphone上的safari(preference->advaced->developer tool),还可以手动添加android的user agent{ Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus }

iphone的safari上有debug调试

关注Mobile性能问题,可以采用firebuglite等书签脚本来调试

文章的标题说的是web app/page,其实用html5和css3构建的app和page没啥区别,web page也很容易转换成native的app,通过phoneGap就可以了,phoneGap所做的就是在一个native的app内嵌入了一个类似chrome的浏览器,并且创建了一个桥接,从而直接去写web app就可以了,就像这个slide的标题写的一样“HTML5 is the Future of Mobile, PhoneGap Takes You There Today”,你的app可以在5个以上的平台上运行,使用的技术是你所熟悉的html/js/css,还等什么,赶快看看它的文档实践一下吧。

转自:http://adamlu.com/?p=527&cpage=1#comment-3672

 

因为都是些简单的逻辑代码,所以不作解说。

只是期间用到自定义获取元素的函数get(),和做了浏览器之间的兼容而已。

//为元素添加事件函数
//node --> 需要添加事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要添加的函数
H.DOM.addEvent = function(node,type,handle){
	var node = H.DOM.get(node);
	if(node.addEventListener){
		node.addEventListener(type,handle,false);
	}
	else if(document.attachEvent){
		node.attachEvent("on" + type,handle);
	}
}
//为元素移除事件函数
//node --> 需要移除事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要移除的函数
H.DOM.removeEvent = function(node,type,handle){
	var node = H.DOM.get(node);
	if(node.removeEventListener){
		node.removeEventListener(type,handle,false);
	}
	else if(document.detachEvent){
		node.detachEvent("on" + type,handle);
	}
}

 

 

 

CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm。

CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),意思就是说你可以在html节点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图:

我们来看一个简单的代码实例:

html {
font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/
}
body {
font-size: 1.4rem;/*1.4 × 10px = 14px */
}
h1 {
font-size: 2.4rem;/*2.4 × 10px = 24px*/
}

我在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

浏览器的兼容性

rem是CSS3新引进来的一个度量单位,大家心里肯定会觉得心灰意冷呀,担心浏览器的支持情况。其实大家不用害怕,你可能会惊讶,支持的浏览器还是蛮多的,比如:Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8不支持。
不过使用单位设置字体,可不能完全不考虑IE了,如果你想使用这个REM,但也想兼容IE下的效果,可你可考虑“px”和“rem”一起使用,用”px”来实现IE6-8下的效果,然后使用“Rem”来实现代浏览器的效果。

转自:http://www.hujuntao.com/archives/css3-font-size-with-rem.html

 

在前面,我们自定义了一个getElementsByClassName()的函数,现在由该函数,我们可以引伸到一个根据类名和id获取元素的函数。

只需要做个判断就是了。因为仅供自己使用,且节省代码,所以并没有兼容所有css选择器,只是根据“.”和“#”这两个条件。

//获取元素
//str --> id , className or object		格式: "#id" , ".className" or 需要获取的对象
H.DOM.get = function(node){
	if(typeof node == "string"){
		var nodestr = node.toString().substr(1);
		if(node.match(/^#/)){
			node = document.getElementById(nodestr);
		}else{
			node = H.DOM.getElementsByClassName(nodestr);
		}
	}
	return node;
}
 
javascript 在事件监听方面的兼容性总结,注意是由于多个浏览器的不一致,导致大家在js书写时需要考虑多个浏览器的兼容性。
1、IE使用attachEvent/detachEvent方法来添加和删除事件监听器;
w3c使用addEventListener/removeEventListener方法。
例一:
//为元素添加事件函数
//node --> 需要添加事件的元素
//type --> 事件类型的字符串		如:"click" 带引号,没有"on"
//handle --> 需要添加的函数
H.DOM.addEvent = function(node,type,handle){
	var node = H.DOM.get(node);//获取元素
	if(node.addEventListener){
		node.addEventListener(type,handle,false);
	}
	else if(document.attachEvent){
		node.attachEvent("on" + type,handle);
	}
}

2、IE对其事件使用onevent的命名方式,而w3c的是event的命名方式。(见例一)

3、IE事件监听器内使用的是一个全局的Event对象,而w3c是将event对象作为参数传递给监听器。

例二:
//获取触发事件的元素
// e --> 作为参数,表示事件本身
H.Event.getEventTarget = function(e){
	e = window.event || e;
	return e.srcElement || e.target;
}

4、为了避免触发默认的事件行为,IE的做法是要求程序员设置Event对象中的returnValue属性值为false,而w3c的做法是执行preventDefault方法。

5、IE没有提供对事件捕获阶段的支持。

6、要停止事件的传递,IE的做法是设置event对象的cancelBubble为true,而w3c的做法是设置执行stopPropagation方法。

7、IE将事件监听器当做一个独立的函数来调用,而w3c中它是作为对象的方法来调用的,这表示在ie中事件监听器中的this关键字指向的不是事件发生对象而是一个没用的全局对象(window对象)。(见例二)

8、IE在使用事件监听器方面存在内存泄露问题。在IE浏览器中,如果要为某个元素创建一个事件监听器,并且在监听器中使用该元素,则在用户进入其他页面之前,该监听器以及相关的DOM节点作占据的内存空间不会被释放。

 

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3)
Node.CDATA_SECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE (6)
Node.PROCESSING_INSTRUCTION_NODE (7)
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)

检测节点类型。

我们可以使用nodeType特性检验节点类型:

alert(document.nodeType);/**outputs “9″**/
alert(document.documentElement.nodeType);// outputs “1″

这个例子中,document.nodeType返回9,等于Node.DOCUMENT_NODE;同时document.documentElement.nodeType返回1,等于Node.ELEMENT_NODE;

也可以使用Node的常量来匹配这些值:

alert(document.nodeType==Node.DOCUMENT_NODE);//ture
alert(document.documentElement.nodeType==Node.ELEMENT_NODE);//true

这段代码可以在Mozilla 1.0+、Opera7.0+ 、Safari1.0+ 上正常运行。不幸的是,IE不支持这些常量,所以这些代码在IE上会产生错误。所幸,可以通过定义匹配节点类型的常量来纠正这种情况。

if(typeof Node==”undefined”){
window.Node={
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATA_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE:11,
NOTATION_NODE:12
}
}

转自:http://blog.163.com/xz551@126/blog/static/821257972011112754345663/

© 2012 Hedgehog Suffusion theme by Sayontan Sinha