|
用HTML,CSS和JavaScript创建iPhone/iPad应用程序
用HTML,CSS和JavaScript创建iPhone/iPad应用程序
怎样做才能让网页象看起来象本机程序一样呢?
你需要做如下工作:
全屏幕:去掉浏览器的地址栏和按钮栏;
防止窗口滚动和缩放;
响应多点触摸和手势事件;
使用WebKit的CSS得到的iPhone OS的外观和感觉;
高速缓存的应用程序，因此它不上网运行;
在主屏幕上的一个自定义图标;
加一个启动画面。
如果你想更深入的了解这方面的知识，我给你推荐一本书"Building iPhone Application with HTML，CSS
and JavaScript。
全屏幕
为了摆脱URL和按钮栏，只需添加一个meta标签：
<meta name="apple-mobile-web-app-capable" content="yes" />
更改手机的状态栏
您还可以更改手机的状态栏显示一个meta标签。您可以是白色，黑色或半透明：
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
为内容的值是默认情况下，黑色和黑色半透明。
防止结垢
如果你捏一个web应用程序，但它仍然响应喜欢在浏览器和放大。这可以是该应用程序是不是本机的
赠品。如果你想防止结垢，使用视meta标签：
<meta name="viewport" content="user-scalable=no, width=device-width" />
你几乎可以肯定将要设置设备宽度以及视区宽度，使应用程序显示在其自然分辨率。
防止弹性滚动
要防止弹性滚动 ，你可以捕捉在JavaScript的touchmove事件，并取消它们。您可以通过添加一个body
标签的处理程序，并调用事件对象的preventDefault方法：
<script> function BlockMove(event) { // Tell Safari not to move the window. event.preventDefault() ; } </script>
<body ontouchmove="BlockMove(event);" > ... </body>
创建一个主屏幕图标
要添加一个主屏幕图标，创建一个114x114的PNG文件，然后在头连接到它。
<link rel="apple-touch-icon" href="./apple-touch-icon.png"
iPhone的自动适用的光泽。
创建一个起始画面
要在加载过程中显示起始画面，创建一个320x460的PNG文件，然后在头连接到它。
<link rel="apple-touch-startup-image" href="./startup.png"
该文件必须完全320x460，否则iPhone的忽略它。 （iPad的需要1004x768）。
缓存的应用程序文件
如果您希望能够使用您的应用程序没有互联网，或者你想提高其负载时间，创建一个缓存清单文件，
从主文件的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
检测触摸和手势的事件
您可以在JavaScript中捕获的多点触摸和手势事件。此外，还有一个很好的理由这样做：如果你听传统
活动，如点击，你会得到一秒钟的延迟，而iPhone的亮点是元素“点击。”如果你试图模仿一个真正的应
用程序，这种行为开始感到繁琐和缓慢。直接通过捕捉触摸事件，可以立即响应用户输入。
有两种方法来跟踪触摸事件。当你捕捉原始触控事件，你跟踪个人的手指。当你捕捉手势事件，你捕
捉手指运动的诠释，如缩放和旋转。
可以连接到触摸处理程序是：
•ontouchstart - 开始触摸。
•ontouchmove - 触摸并移动。
•ontouchend - 结束触摸。
可以连接到的手势处理程序是：
•ongesturestart - 手势开始-放缩或旋转开始。
•ongesturechange - 手势改变(放缩或旋转)。
•ongestureend - 规模或轮换结束。
如果你只是想使用在触摸的地方，点击，那么该事件对象的目标字段包含被移动的元素。
我创建了一个示例应用程序，使用手势来缩放图形。
检测旋转事件
如果你想采取行动，旋转手机时，听body标签的onorientationchange事件。目前的方向是在
window.orientation，和它编码的角度（度）的iPhone旋转 - 0，-90或90 - 离垂直直立。
模仿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 ;
} | 
免费注册
发表于 2011-08-04 13:39