iPad開發的侷限性
- 在iPad上使用Safari瀏覽普通網站網頁的時候,網頁因爲太大而導致需要手動放大縮小或者滑動,雖然這種滑動行爲在iPad上市之初的各種宣傳中被津津樂道,但時間久了我們還是會發現這樣做並不方便,給用戶帶來的感受並不十分好。
- 不支持Flash
在沒有越獄的iPad Safari中,網站的Flash都是無法顯示的,但可以通過第三方軟件或插件或者瀏覽器來解決,不過,即使不能顯示Flash,你一樣能夠用HTML5和CSS3實現同樣的效果。
- 沒有鼠標光標
這意味着鼠標屬性,例如鼠標懸停屬性是不可能有的。
你或許可以爲這個找到一些變通的辦法,但是到你的用戶那裏這些該如何工作將會是困難的事。
- 滾動條不能按照預期那樣起作用
滾動條不能顯示包含了充滿過多分區的內容。框架也存在高度和寬度的問題。另外,滾動過程中需要兩個手指的手勢。(我們將在下文中進行充分的討論)
- 不支持CSS固定佈局
HTML 元素 position:fixed CSS屬性不能正確顯示,常常會使得頁面停留在第一屏,無法向下翻頁、放大縮小。
iPad用戶偵測:User Agent(用戶代理)
隨着移動設備上網的普及,很多網站都會進行客戶端瀏覽器類型偵測,主要是靠User Agent來進行識別,如果偵測到是手機瀏覽則可能重定向,讓用戶瀏覽移動設備專用版本。以往我們所指的移動設備,主要是手機等終端,現在,iPad也加入到移動終端設備的行列中來,但它擁有9.7″大屏幕,iPad的Safari瀏覽器帶來接近PC電腦的瀏覽感受。所以對應iPad的網站頁面必須不同於其他移動設備,區別iPad訪問主要也要依靠其瀏覽器的User Agent來進行。
iPhone OS 3.2 SDK beta 3中描述的iPad Safari瀏覽器User Agent代碼:
1
|
Mozilla/5.0
(iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10 |
iPad Safari的User Agent代碼包含單詞:”Mobile”、”iPad”,不包含單詞:”iPhone”。這點必須要留意,如果網站以前的版本對移動設備的訪問並未區分,那麼現在需要修改下,以防止對相應設備返回錯誤的版本。
模擬iPad瀏覽器訪問的方式
如果你無法通過iPad或iPhone模擬器測試網頁情況,你還是能夠通過一下方式進行測試:
- 通過Mac OS X 或 Windows版本的Safari瀏覽器充當模擬器
Safari菜單->偏好設置->高級->選中 在菜單欄顯示”開發菜單”,這是在菜單欄就會出現”開發”這個菜單項
菜單”開發”->用戶代理->其他,在彈出的對話框中粘貼上述User Agent代碼,點擊確定以後,就可以用Safari驗證頁面是否適合iPad顯示了。
- 用谷歌瀏覽器充當模擬器
命令行下輸入:
1chrome.exe --user-agent=
"Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"
- Javascript偵測iPad的User Agent,然後轉向到對應版本的URL。
12345
if
((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i))) {
if
(document.cookie.indexOf(
"iphone_redirect=false"
) == -1) {
window.location =
"http://ipad.www.opensoce.com"
;
}
}
- PHP腳本偵測User Agent
1234
if
(
strstr
(
$_SERVER
[
'HTTP_USER_AGENT'
],
'iPhone'
) ||
strstr
(
$_SERVER
[
'HTTP_USER_AGENT'
],
'iPad'
)) {
header(
'Location: http://ipad.www.opensoce.com'
);
exit
();
}
- Apache偵測轉向
1234
RewriteCond %{HTTP_USER_AGENT} ^iPad
RewriteRule ^index\..*$ ipad.html [L]
RewriteCond %{HTTP_USER_AGENT} ^iPhone
RewriteRule ^index\..*$ iphone.html [L]
- Nginx偵測轉向
123456
if
(
$http_user_agent
~*iPad ) {
proxy_pass http:
//ipad.www.opensoce.com;
}
if
(
$http_user_agent
~*iPhone ) {
proxy_pass http:
//iphone.www.opensoce.com;
}
使用W3C標準網站技術
iPad和iPhone的Safari瀏覽器不支持插件以及Flash。
使用插件技術(控件)的菜單、導航等在iPad或iPhone的瀏覽器下將不會顯示。
使用插件植入的音頻、視頻也不會播放, 可以 HTML5的&lt;audio>和<video>標籤發佈音頻視頻內容。詳細可參考Safari DOM中的HTMLMediaElement、HTMLVideoElement、HTMLAudioElement開發信息.
以往,你可能需要插件去表現動畫內容,而在iPad和iPhone瀏覽器下可以直接採用Javascript+CSS3的特性去製作動畫。CSS3開始朝着模塊化的方向發展,比如盒子模型、列表模塊、背景和邊框等等。利用CSS3,你可以直接做出圓角表格,之前可是隻能用圖片或者VML技術才能實現。
關於HTML5和CSS3,目前在國內比較早和成功的應用是網易三大郵箱((mail.163.com; mail.126.com ;www.yeah.net),你在iPad上輸入上述地址的時候,會被轉向到iPad適應版本,用戶感受很好。HTML5在規範性和速度上擁有諸多優勢,據網易提供的數據顯示,這個版本的使用中收信寫信的速度提升50%。此外,還有一個優勢在於,代碼量減少大大提高郵箱服務器的處理運行效率,爲日後的功能擴展提供一個更強有力的平臺。
HTML5/CSS3的未來和目標是爲了改善每個人的網絡體驗。HTML5/CSS3的一點簡介:
1
2
3
4
|
*
使用CSS3漸變,字體陰影,圓盒以邊界–這些對菜單欄和簡單的網站設計師特別實用的。 *
如果你想顯示視頻,使用HTML5 視頻播放器代替Flash(顯然它就不能工作)。 *
使用HTML5創建離線程序並且脫機存儲數據。 *
各種實用的教程到處都有,當在開發我的iPad網絡程序時我就已經利用了它們。Google他們,得到創意。 |
利用普通電腦的Safari測試無插件支持情況,在偏好設置->安全->,取消啓用插件的選擇框,
設置viewpoint和屏幕等寬
如果不設置viewpoint,網站在viewpoint就會顯示成縮略形式。如果你專門爲iPhone/iPod開發網站,這一條很有用,而且很簡單,只需要插入到head裏就可以:
Code:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
使用iPhone規格圖標
如果你的用戶將你的網站添加到home screen,iPhone會使用網站的縮略圖作爲圖標。然而你可以提供一個自己設計的圖標,這樣當然更好。圖片是57×57大小,png格式。不需要自己做圓角和反光,系統會自動完成這些工作。然後將下面這條加入head中:
Code:
<rel="apple-touch-icon" href="images/youricon.png"/>
阻止旋轉屏幕時自動調整字體大小
-webkit-text-size-adjust是webkit的私有css:
Code:
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
偵測設備旋轉方向
iPhone可以在橫屏狀態下瀏覽網頁,有時候你會想知道用戶設備的手持狀態來增強可用性和功能。下面一段Javascript可以判斷出設備向哪個方向旋轉,並且替換css:
Code:
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);
}
iPhone才識別的CSS
如果不想設備偵測,可以用CSS媒體查詢來專爲iPhone/iPod定義樣式。
Code:
@media screen and (max-device-width: 480px) {}
CSS3媒體查詢
對於CSS3的媒體(media)查詢,iPhone和iPad是不同的。通過這個技術,可以對設備不同的握持方向應用不同的樣式,增強功能和體驗。
iPhone是通過屏幕最大寬度來偵測的。是這樣:
Code:
而iPad有點不同,它直接使用了媒體查詢中的orientation屬性。是這樣:
Code:
之後只要將不同的樣式分別定義出來就可以了。
縮小圖片
網站的大圖通常寬度都超過480像素,如果用前面的代碼限制了縮放,這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機能還夠,我們可以用CSS讓iPhone自動將大圖片縮小顯示。
Code:
@media screen and (max-device-width: 480px){
img{max-width:100%;height:auto;}
}
注意如果原圖片非常大,或一個頁面非常多圖,最好還是在服務器端縮放到480像素寬,iPhone只需要在正常瀏覽時縮略到320像素。這樣不會消耗太多流量和機能。
默認隱藏工具欄
iPhone的瀏覽器工具欄會在頁面最頂端,捲動網頁後才隱藏。這樣在加載網頁完成後顯得很浪費空間,特別是橫向屏幕時。我們可以讓它自動捲動上去。
Code:
window.addEventListener('load',function(){
setTimeout(scrollTo,0,0,1);
},false);
模擬:hover僞類
因爲iPhone並沒有鼠標指針,所以沒有hover事件。那麼CSS :hover僞類就沒用了。但是iPhone有Touch事件,onTouchStart 類似 onMouseOver,onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript:
Code:
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效果:
Code:
a:hover, a.hover { /* 你的hover效果 */ }
這樣設計一個鏈接,感覺可以更像按鈕。並且,這個模擬可以用在任何元素上。
iphone fixed positioning
Code:
關於漂浮定位,測試後發現 { position: fixed; } 不能爲其用,
可以改爲 { position:absolute; } 來實現,可以使用iphone看下DEMO:iphone-fixed-positioning
Touch Events
iPhone 是使用觸屏的方式,所以就需要有手觸屏和離開的時候的事件機制,幸好,iPhone做好了這方面的工作,提供了四個處理touch的事 件:touchstart,touchend,touchmove,touchcancel(when the system cancels the touch) 。
Gestures
即是指兩隻手指接觸屏幕的時候縮放或者旋轉的效果,對於偵聽gestures,iPhone也有三個事件:gesturestart,gestureend,gesturechange。
同時事件參數event有兩個屬性:scale,rotate。Scale的中間值是1,大於1表示放大,小於1表示縮小。
參考資料:
iPhone CSS—tips for building iPhone websites
iPhone & iPod Detection Using Javascript
iPhone Development: 12 Tips To Get You Started
Tutorial: Building a website for the iPhone
hover pseudoclass for the iPhone
fixed-positioning-on-mobile-safari
Preparing Your Web Content for iPad
轉自:http://www.cnblogs.com/radom/archive/2012/03/01/2376436.html