象大多数iPad粉丝和程序员一样,我有一个梦想,那就是如果不需要昂贵的Apple设备,不要繁琐的审批程序,不要为发布应用交钱就能开发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方法:
<script> function BlockMove(event) { // Tell Safari not to move the window. event.preventDefault() ; } </script>
<body ontouchmove="BlockMove(event);" > ... </body>
5.创建主屏幕图标
要添加一个主屏幕图标,需要创建一个114x114的PNG文件,然后做一个<link>加入到<head>里面。
<link rel="apple-touch-icon" href="https://www.cnblogs.com/brucepark/archive/2011/08/04/apple-touch-icon.png" >
6.创建一个起始画面
要在加载过程中显示起始画面,需要创建一个320x460的PNG文件,加入到<head>里。
<link rel="apple-touch-startup-image" href="https://www.cnblogs.com/brucepark/archive/2011/08/04/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 ;
}