用HTML,CSS和JavaScript创建iPhone/iPad应用程序

======================================================

注：本文源代码点此下载

======================================================

全屏幕:(去掉浏览器的地址栏和按钮栏);

防止窗口滚动和缩放;

响应多点触摸和手势事件;

使用webkit的css得到的iphone os的外观和感觉;

高速缓存的应用程序,因此它不上网运行;

在主屏幕上的一个自定义图标;

加一个启动画面。

如果你想更深入的了解这方面的知识,我给你推荐一本书:"building iphone application with html,css and javascript"。

1.全屏幕

添加一个meta标签就可以去掉url和按钮栏:

2.更改手机的状态栏

您还可以更改手机的状态栏显示,可以是白色,黑色或半透明:

为内容的值是默认情况下,黑色和黑色半透明。

3.防止结垢

如果你捏一个web应用程序,但它仍然可以在浏览器里面放大缩小,这是我们不希望看到的.如果你想防止结垢,使用viewport meta标签

你几乎可以肯定将要设置设备宽度以及视区宽度,使应用程序显示在其自然分辨率。

4.防止弹性滚动

要防止弹性滚动 ,你可以捕捉在javascript的touchmove事件,并取消它们。您可以通过添加一个body

标签的处理程序,并调用事件对象的preventdefault方法:

...

5.创建主屏幕图标

要添加一个主屏幕图标,需要创建一个114x114的png文件,然后做一个加入到里面。

6.创建一个起始画面

要在加载过程中显示起始画面,需要创建一个320x460的png文件,加入到里。

确保您的web服务器服务。manifest文件的mime类型text /manifest,否则这将无法工作。如果你使用

apache,在你的htaccess文件以下。

addtype text/cache-manifest.manifest

然后使用wget的-s的检查响应头的内容类型是正确的。

cache.manifest文件列出了哪些文件应该被缓存的,应该从网络检索:

cache manifest

local1.file

local2.file

network:

network1.php

network2.cgi

8.检测触摸和手势的事件

触摸事件:

ontouchstart - 开始触摸。

ontouchmove - 触摸并移动。

ontouchend - 结束触摸。

手势事件:

ongesturestart - 手势开始-放缩或旋转开始。

ongesturechange - 手势改变(放缩或旋转)。

ongestureend - 规模或轮换结束。

如果你只是想使用在触摸的地方,点击,那么该事件对象的目标字段包含被移动的元素。

9.检测旋转事件

如果你想检测到旋转手机事件,请监听body标签的on??orientationchange。目前的方向是在

window.orientation,和它编码的角度(度)的iphone旋转 - 0,-90或90 - 离垂直直立。

10.模仿iphone os的组件

webkit渲染引擎支持大量的css扩展,您可以使用这些模拟原生的控件,例如,按钮很容易:

.button {

font-family: helvetica ;

font-weight: bold ;

padding: 15px;

border: 1px solid black ;

-moz-border-radius: 8px ;

-webkit-border-radius: 8px ;

margin-top: 10px ;

margin-bottom: 10px ;

background-color: white ;

}

10.侦测iphone/ipod

开发特定设备的移动网站,首先要做的就是设备侦测了。下面是使用javascript侦测iphone/ipod的ua,然后转向到专属的url。

if((navigator.useragent.match(/iphone/i)) || (navigator.useragent.match(/ipod/i))) {

if (document.cookie.indexof("iphone_redirect=false") == -1) {

window.location = "http://www.8mart.cn";

}

}

11.虽然javascript是可以在水果设备上运行的,但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输,所以下面是服务器端侦测和转向:

if(strstr($_server['http_user_agent'],'iphone') || strstr($_server['http_user_agent'],'ipod')) {

header('location: http://www.8mart.cn/iphone');

exit();

}

12.设置viewpoint和屏幕等宽

如果不设置viewpoint,网站在viewpoint就会显示成缩略形式。如果你专门为iphone/ipod开发网站,这一条很有用,而且很简单,只需要插入到head里就可以:

13.使用iphone规格图标

如果你的用户将你的网站添加到home screen,iphone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标,这样当然更好。图片是57×57大小,png格式。不需要自己做圆角和反光,系统会自动完成这些工作。然后将下面这条加入head中:

14.阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust是webkit的私有css:

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

15.侦测设备旋转方向

iphone可以在横屏状态下浏览网页,有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段javascript可以判断出设备向哪个方向旋转,并且替换css:

window.onload = function initialload() {updateorientation();}

function updateorientation(){

var contenttype = “show_”;

switch(window.orientation){

case 0:

contenttype += “normal”;

break;

case -90:

contenttype += “right”;

break;

case 90:

contenttype += “left”;

break;

case 180:

contenttype += “flipped”;

break;

}

document.getelementbyid(“page_wrapper”).setattribute(“class”, contenttype);

}

16.iphone才识别的css

如果不想设备侦测,可以用css媒体查询来专为iphone/ipod定义样式。

@media screen and (max-device-width: 480px) {}

17.css3媒体查询

对于css3的媒体(media)查询,iphone和ipad是不同的。通过这个技术,可以对设备不同的握持方向应用不同的样式,增强功能和体验。

iphone是通过屏幕最大宽度来侦测的。是这样:

18.而ipad有点不同,它直接使用了媒体查询中的orientation属性。是这样:

之后只要将不同的样式分别定义出来就可以了。

19.缩小图片

网站的大图通常宽度都超过480像素,如果用前面的代码限制了缩放,这些图片在iphone版显示显然会超过屏幕。好在iphone机能还够,我们可以用css让iphone自动将大图片缩小显示。

@media screen and (max-device-width: 480px){

img{max-width:100%;height:auto;}

}

注意如果原图片非常大,或一个页面非常多图,最好还是在服务器端缩放到480像素宽,iphone只需要在正常浏览时缩略到320像素。这样不会消耗太多流量和机能。

默认隐藏工具栏

20.iphone的浏览器工具栏会在页面最顶端,卷动网页后才隐藏。这样在加载网页完成后显得很浪费空间,特别是横向屏幕时。我们可以让它自动卷动上去。

21.模拟:hover伪类

因为iphone并没有鼠标指针,所以没有hover事件。那么css :hover伪类就没用了。但是iphone有touch事件,ontouchstart 类似 onmouseover,ontouchend 类似 onmouseout。所以我们可以用它来模拟hover。使用javascript:

var mylinks = document.getelementsbytagname('a');

for(var i = 0; i < mylinks.length; i++){

mylinks[i].addeventlistener(’touchstart’, function(){this.classname = “hover”;}, false);

mylinks[i].addeventlistener(’touchend’, function(){this.classname = “”;}, false);

}

然后用css增加hover效果:

a:hover, a.hover { /* 你的hover效果 */ }

这样设计一个链接,感觉可以更像按钮。并且,这个模拟可以用在任何元素上。

22.iphone fixed positioning

关于漂浮定位,测试后发现 { position: fixed; } 不能为其用,

可以改为 { position:absolute; } 来实现,可以使用iphone看下demo：iphone-fixed-positioning

23.touch events

iphone 是使用触屏的方式,所以就需要有手触屏和离开的时候的事件机制,幸好,iphone做好了这方面的工作,提供了四个处理touch的事 件:touchstart,touchend,touchmove,touchcancel(when the system cancels the touch) 。

24.gestures

即是指两只手指接触屏幕的时候缩放或者旋转的效果,对于侦听gestures,iphone也有三个事件:gesturestart,gestureend,gesturechange。

同时事件参数event有两个属性:scale,rotate。scale的中间值是1,大于1表示放大,小于1表示缩小。

======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/