今天一前端同事在進行mobile開發時，苦於沒有真機能夠用來測試，讓我幫忙看看，因而我找到了這篇文章。 css
在沒有越獄的iPad Safari中，網站的Flash都是沒法顯示的，但能夠經過第三方軟件或插件或者瀏覽器來解決，不過，即便不能顯示Flash，你同樣可以用HTML5和CSS3實現一樣的效果。 html
這意味着鼠標屬性，例如鼠標懸停屬性是不可能有的。 前端
你或許能夠爲這個找到一些變通的辦法，可是到你的用戶那裏這些該如何工做將會是困難的事。 web
滾動條不能顯示包含了充滿過多分區的內容。框架也存在高度和寬度的問題。另外，滾動過程當中須要兩個手指的手勢。（咱們將在下文中進行充分的討論） chrome
HTML 元素 position:fixed CSS屬性不能正確顯示，經常會使得頁面停留在第一屏，沒法向下翻頁、放大縮小。 瀏覽器
隨着移動設備上網的普及，不少網站都會進行客戶端瀏覽器類型偵測，主要是靠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」。這點必需要留意，若是網站之前的版本對移動設備的訪問並未區分，那麼如今須要修改下，以防止對相應設備返回錯誤的版本。 cookie
模擬iPad瀏覽器訪問的方式 網絡
若是你沒法經過iPad或iPhone模擬器測試網頁狀況，你仍是可以經過一下方式進行測試：
Safari菜單->偏好設置->高級->選中 在菜單欄顯示」開發菜單」，這是在菜單欄就會出現」開發」這個菜單項
菜單」開發」->用戶代理->其餘，在彈出的對話框中粘貼上述User Agent代碼，點擊肯定之後，就能夠用Safari驗證頁面是否適合iPad顯示了。
命令行下輸入:
|
1
|
chrome.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"
|
|
1
2
3
4
5
|
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";
}
}
|
|
1
2
3
4
|
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||strstr($_SERVER['HTTP_USER_AGENT'],'iPad')) {
header('Location:
http://ipad.www.opensoce.com');
exit();
}
|
|
1
2
3
4
|
RewriteCond %{HTTP_USER_AGENT} ^iPad
RewriteRule ^index\..*$ ipad.html [L]
RewriteCond %{HTTP_USER_AGENT} ^iPhone
RewriteRule ^index\..*$ iphone.html [L]
|
|
1
2
3
4
5
6
|
if ($http_user_agent ~*iPad ) {
proxy_pass http://ipad.www.opensoce.com;
}
if ($http_user_agent ~*iPhone ) {
proxy_pass http://iphone.www.opensoce.com;
}
|
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自動將大圖片縮小顯示。
注意若是原圖片很是大，或一個頁面很是多圖，最好仍是在服務器端縮放到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
原文地質：http://www.cnblogs.com/radom/archive/2012/03/01/2376436.html