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

全屏幕:(去掉浏览器的地址栏和按钮栏);
防止窗口滚动和缩放;
响应多点触摸和手势事件;
使用WebKit的CSS得到的iPhone OS的外观和感觉;
高速缓存的应用程序，因此它不上网运行;
在主屏幕上的一个自定义图标;
加一个启动画面。

如果你想更深入的了解这方面的知识，我给你推荐一本书:"Building iPhone Application with HTML，CSS and JavaScript"。

1.全屏幕

添加一个meta标签就可以去掉URL和按钮栏：
<meta name="apple-mobile-web-app-capable" content="yes" />

2.更改手机的状态栏
您还可以更改手机的状态栏显示，可以是白色，黑色或半透明：
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
为内容的值是默认情况下，黑色和黑色半透明。

3.防止结垢
如果你捏一个web应用程序，但它仍然可以在浏览器里面放大缩小,这是我们不希望看到的.如果你想防止结垢，使用viewport meta标签
<meta name="viewport" content="user-scalable=no, width=device-width" />
你几乎可以肯定将要设置设备宽度以及视区宽度，使应用程序显示在其自然分辨率。

4.防止弹性滚动
要防止弹性滚动，你可以捕捉在JavaScript的touchmove事件，并取消它们。您可以通过添加一个body
标签的处理程序，并调用事件对象的preventDefault方法：

5.创建主屏幕图标
要添加一个主屏幕图标，需要创建一个114x114的PNG文件，然后做一个<link>加入到<head>里面。

6.创建一个起始画面
要在加载过程中显示起始画面，需要创建一个320x460的PNG文件，加入到<head>里。
<link rel="apple-touch-startup-image" href="./startup.png"
该文件必须绝对320x460，否则iPhone就会忽略它。（iPad的需要1004x768）。

7.缓存应用程序文件
如果您希望能够使用您的应用程序没有互联网，或者你想提高其负载时间，创建一个缓存清单文件，
从主文件的Web应用程序的链接：
<html manifest="cache.manifest">
确保您的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标签的onorientationchange。目前的方向是在
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中：

<rel="apple-touch-icon" href="images/youricon.png"/>

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

function hideAddressbar()
{
window.scrollTo(0, 1);
}
</script>

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表示缩小。

posted @ 2011-10-18 20:12 harvey.ding 阅读(1100) 评论(0) 收藏举报

刷新页面返回顶部

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

公告