突然用了框架这个概念,感觉自己很高级的样子。。。
其实我的这个算不上成型的框架。。因为代码量太小(安慰下:有代码就算框架啊。。)平时大家无论在用什么语言写程序的时候,为了更敏捷地开发,到了一定阶段运用框架是很必要的,大至javaEE的3大框架Struts Hibernate Spring(一点也没看过。。不过在某些领域是行业标准啊啊啊) RoR, .Net等,小至前端开发的一些css js开发框架。说到框架,可以说的太多,其实自己也不是很明白,后续补上吧。。
回到正题。说下我的这个小东西。
话说上学期给前辈做过很简单的基于iphone显示的网页,因为是在iphone这种特殊的移动终端上显示,所以必须考虑很多发生大的变动的因素,譬如网页的大小,布局,事件反应等等,css和js都是有所区别于正常pc上的浏览器的。
做了几个静态的iphone网页之后,今天把代码翻了下,删减掉每次的特殊的部分,留下的共用的html和css(js暂时没有写,它和pc浏览器的区别在于事件捕捉增加和一些在移动终端无效的属性的去除,以后再说吧~)总结下来,就是我所谓的框架了(脸皮挺厚。。)
下面都拿出来和大家分享(怎么好意思拿出来。。。)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <title>webapp</title> <link rel="StyleSheet" href="style.css" type="text/css" media="screen" id="orient_css"> </head> <body onorientationchange="orient();"><!--js 感应控制--> <div id="wrap"> </div> </body> </html>
//css
body
{
margin-top:-0px;
margin-left:-0px;
text-decoration:none;
}
#wrap
{
overflow:auto;
width:320px;
height:480px;
background-color:#98989c;
}
@media only screen and (orientation:landscape)//对横竖屏转换的监控
{
body
{
margin-top:-0px;
margin-left:-0px;
text-decoration:none;
}
#wrap
{
overflow:auto;
width:480px;
height:320px;
background-color:#98989c;
}
}
大致是这样,横竖屏转换是个关键点,开始头部的声明部分也很关键~
再提供一些参数:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> device-width:视图宽度与设备同宽。
<link rel="apple-touch-icon" href="/yourIcon.png"/> 指定在iPhone主屏上所显示的图标为yourIcon.png
<link rel="apple-touch-startup-image" href="/startupImage.png"> 指定web应用启动时的显示图片。
<meta name="apple-mobile-web-app-capable" content="yes"> 指定显示特征为web应用,不显示浏览器的特征。
01 // navigator.standalone
03 if ("standalone" in navigator){
04 if (navigator.standalone){
05 alert("Started from homescreen");
06 }else{
07 alert("Started in browser");
08 }
09 }else{
10 alert("Not supporting standalone property");
11 }
在script中用window.navigator.standalone属性判断是否是Web应用程序(是否是以homescreen方式启动的)。 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />指定iphone的状态条(status bar)的显示为透明,透明状漂浮在web应用视图的上面。也可以是default或black值。如:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
或者
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
但是确实有很多东西没有考虑,我准备如果可能的话会放在Git上版控呵呵。。积少成多呀~~
还有,如果想对iphone web开发深入下去的话,推荐国内唯一较好的译本《iphone开发实战》,里面讲述的是web开发和传统SDK开发基于iphone内嵌Safari的应用,主题都是web,很明确,难能可贵啊~什么高级WebKit开发,Canvas的HTML5开发,用开源控件库开发等等等等~
还有一个不错的开发总结,中文的能找到的不多,就先推荐下~
好了,大言不惭地把很傻的东西拿出来,也许是安慰自己多一点吧,这个所谓的框架真的只是最最最最最最最基本的设置了。。。哈哈 然后呢,靠大家自己添加了~~
(框架?下一篇吧 嘿嘿~)
