iPhone開發優秀網站必用代碼
iPhone開發優秀網站 必用代碼要介紹的內容，如果要針對iPhone/iPod Touch開發移動網站，以下十條小代碼幾乎肯定是需要用到的，方便又有效。
偵測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://m.espn.go.com/wireless/?iphone&i=COMR";
- }
- }
雖然Javascript是可以在水果設備上運行的，但是用戶還是可以禁用。它也會造成客戶端刷新和額外的數據傳輸，所以下面是服務器端偵測和轉向：
- if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
- header('Location: http://yoursite.com/iphone');
- exit();
- }
設置viewpoint和屏幕等寬
如果不設置viewpoint，網站在viewpoint就會顯示成縮略形式。如果你專門為iPhone/iPod開發網站，這一條很有用，而且很簡單，只需要插入到head里就可以：
- <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
使用iPhone規格圖標
如果你的用戶將你的網站添加到home screen，iPhone會使用網站的縮略圖作為圖標。然而你可以提供一個自己設計的圖標，這樣當然更好。圖片是57×57大小，png格式。不需要自己做圓角和反光，系統會自動完成這些工作。然后將下面這條加入head中：
- <relrel="apple-touch-icon" href="images/youricon.png"/>
阻止旋轉屏幕時自動調整字體大小
-webkit-text-size-adjust是webkit的私有css：
- html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
偵測設備旋轉方向
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.getElementByIdx_x(“page_wrapper”).setAttribute(“class”, contentType);
- }
iPhone才識別的CSS
如果不想設備偵測，可以用CSS媒體查詢來專為iPhone/iPod定義樣式。
- @media screen and (max-device-width: 480px) {}
縮小圖片
網站的大圖通常寬度都超過480像素，如果用前面的代碼限制了縮放，這些圖片在iPhone版顯示顯然會超過屏幕。好在iPhone機能還夠，我們可以用CSS讓iPhone自動將大圖片縮小顯示。
- @media screen and (max-device-width: 480px){
- img{max-width:100%;height:auto;}
- }
注意如果原圖片非常大，或一個頁面非常多圖，***還是在服務器端縮放到480像素寬，iPhone只需要在正常瀏覽時縮略到320像素。這樣不會消耗太多流量和機能。
默認隱藏工具欄
iPhone的瀏覽器工具欄會在頁面最頂端，卷動網頁后才隱藏。這樣在加載網頁完成后顯得很浪費空間，特別是橫向屏幕時。我們可以讓它自動卷動上去。
- window.addEventListener('load', function() {
- setTimeout(scrollTo, 0, 0, 1);
- }, false);
使用特殊鏈接
這兩條不用說了吧：
- <a href="tel:12345678900">打電話給我</a>
- <a href="sms:12345678900">發短信</a>
模擬:hover偽類
因為iPhone并沒有鼠標指針，所以沒有hover事件。那么CSS :hover偽類就沒用了。但是iPhone有Touch事件，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript：
- var myLinks = document.getElementsByTagName_r('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 { }
這樣設計一個鏈接，感覺可以更像按鈕。并且，這個模擬可以用在任何元素上。
小結：iPhone開發優秀網站 必用代碼的內容介紹完了，希望通過本文的學習對你能有所幫助！
