用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^)/