手機開發必備技巧：javascript及CSS功能程式碼分享_javascript技巧

width -             //  viewport 的寬度（範圍從200 到10,000，預設為980 像素）
height -            //  viewport 的高度（範圍從223 到10,000）
 
initial-scale -     //  初始的縮放比例 （範圍從>0 到10）
 
minimum-scale -    //   允許使用者縮放到的最小比例
maximum-scale -    //   允許使用者縮放到的最大比例
 
user-scalable -    //   使用者是否可手動縮 (no,yes)

   //編碼

  // 離線應用的另一個技巧    
  // 隱藏狀態欄       
//指定的iphone中safari頂端的狀態條的樣式       
       //告訴裝置忽略將頁面中的數字識別為電話號碼     
 

// 設定開始頁面圖片
// 在設定書籤的時候可以顯示好看的圖示
    // 肖像模式樣式      
 
//垂直畫面時使用的樣式

 
//橫屏時使用的樣式
 

// 手勢事件
touchstart            //手指接觸螢幕時觸發
touchmove           //當已接觸螢幕的手指開始移動後觸發
touchend             //當手指離開螢幕時觸發
touchcancel
 
// 觸碰事件
gesturestart          //當兩個手指接觸螢幕時觸發
gesturechange      //當兩隻手指接觸螢幕後開始移動時觸發
gestureend
 
// 螢幕旋轉事件  
onorientationchange    
 
// 偵測觸控螢幕的手指何時改變方向      
orientationchange      
 
// touch事件支援的相關屬性
touches        
targetTouches      
changedTouches             
clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)      
clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)      
screenX　　　 // Relative to the screen       
screenY 　　  // Relative to the screen      
pageX　　 　　// Relative to the full page (includes scrolling)    
pageY　　　　 // Relative to the full page (includes scrolling)    
target　　　　 // Node the touch event originated from     
identifier　　   // An identifying number, unique to each touch event

// 判斷螢幕是否旋轉
function orientationChange() {
    switch(window.orientation) {
    　　case 0: 
            alert("肖像模式 0,screen-width: " screen.width "; screen-height:" screen.height);
            break;
    　　case -90: 
            alert("左旋 -90,screen-width: " screen.width "; screen-height:" screen.height);
            break;
    　　case 90:   
            alert("右旋 90,screen-width: " screen.width "; screen-height:" screen.height);
            break;
    　　case 180:   
        　　alert("風景模式 180,screen-width: " screen.width "; screen-height:" screen.height);
        　　break;
    };
};
// 新增事件監聽
addEventListener('load', function(){
    orientationChange();
    window.onorientationchange = orientationChange;
});

// 隱藏網址列  & 處理事件的時候 ，防止捲軸出現
addEventListener('load', function(){
        setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

// 雙手指滑動事件
addEventListener('load',　　function(){ window.onmousewheel = twoFingerScroll;},
     false              // 相容於各式瀏覽器，以在冒泡階段呼叫事件處理程序 (true 擷取階段)
);
function twoFingerScroll(ev) {
    var delta =ev.wheelDelta/120;              //以 delta 值判斷(如正負) ，而後執行對應操作
    return true;
};

// 判斷是否為 iPhone ：
function isAppleMobile() {
    return (navigator.platform.indexOf('iPad') != -1);
};

var v = localStorage.getItem('n') ? localStorage.getItem('n') : "";   // 如果名稱是  n 的資料存在 ，則將其讀出 ，賦予變數  v  。
localStorage.setItem('n', v);                            🎜> localStorage.removeItem('n');                            🎜>

傳簡訊


或用於單元格：

-webkit-border-top-left-radius: horizo​​ntal_radius vertical_radius;
-webkit-border-radius: radius;      //容器圓角
-webkit-box-sizing: sizing_model; 邊框常數值：border-box/content-box
-webkit-box-shadow: hoff voff blur color; //容器陰影（參數分別為：水平X 方向偏移量；垂直Y 方向偏移量；高斯模糊半徑值；陰影顏色值）
-webkit-margin-bottom-collapse: collapse_behavior; 常數值：collapse/discard/separate
-webkit-margin-start: width;
-webkit-padding-start: width;
-webkit-border-image: url(borderimg.gif) 25 25 25 25 round/stretch round/stretch;
-webkit-appearance: push-button;   //內建的CSS 表現，暫時只支援push-button


②「視覺格式化模型」描述性質，決定了位置和大小的區塊元素。

③「視覺效果」描述屬性，調整的視覺效果塊內容，包括溢出行為，調整行為，能見度，動畫，變換，和過渡。

④「產生的內容，自動編號，並列出」描述屬性，允許您更改內容的一個組成部分，創建自動編號的章節和標題，和操縱的風格清單的內容。

⑤「分頁媒體」描述效能與外觀的屬性，控製印刷版本的網頁，如分頁符號的行為。

⑥「顏色和背景」描述屬性控制背景下的區塊級元素和顏色的文字內容的組成部分。

⑦ 「字型」的具體描述性質的文字字體的選擇範圍內的一個因素。報告還描述屬性用於下載字體定義。

⑧「文字」描述屬性的特定文字樣式，間距和自動滾屏。

⑨「表格」所描述的佈局和設計效能表的具體內容。

⑩「使用者介面」描述屬性，涉及到使用者介面元素在瀏覽器中，如滾動文字區，滾動條，等等。報告也描述屬性，範圍以外的網頁內容，如遊標的標註樣式和顯示當您按住觸摸觸摸
目標，如在iPhone上的連結。

12. 動畫轉換
這是 Webkit 中最具創新力的特性：使用過渡函數定義動畫。

這些同樣是可以簡寫的。但真正讓我覺的很爽的是keyframes，它能定義一個動畫的轉變過程供調用，過程為0%到100%或from(0%)到to(100%)。簡單點說，只要你有想法，你想讓元素在這個過程中以什麼樣的方式改變都是很簡單的。

實作模擬彈出訊息框（Alert）的範例：
①定義過渡（在

@-webkit-keyframes DivZoom
{
0% { -webkit-transform: scale(0.01) }
60% { -webkit-transform: scale(1.05) }
80% { -webkit-transform: scale(0.95) }
100% { -webkit-transform: scale(1.00) }
}
.sZoom { -webkit-animation: DivZoom 0.5s ease-in-out }

function pHelp()
{
layerH.style.visibility = 'visible'
layerH.style.cssText = "-webkit-animation-delay: " Math.random() "ms"
layerH.className = 'sZoom'
}

3. 偵測iPhone/iPod
開發特定設備的行動網站，首先要做的就是設備偵測了。以下是使用Javascript來偵測iPhone/iPod的UA，然後轉向專屬的URL。

雖然Javascript是可以在水果設備上運作的，但使用者還是可以停用。它也會造成客戶端刷新和額外的資料傳輸，所以下面是伺服器端偵測和轉向：

4. 阻止旋轉螢幕時自動調整字體大小

5. iPhone才辨識的CSS
如果不想設備偵測，可以用CSS媒體查詢來專為iPhone/iPod定義樣式。

6. 縮小圖片
網站的大圖通常寬度都超過480像素，如果用前面的程式碼限制了縮放，這些圖片在iPhone版顯示顯然會超過螢幕。還好iPhone機能還夠，我們可以用CSS讓iPhone自動將大圖縮小顯示。

7. 模擬:hover偽類
因為iPhone並沒有滑鼠指針，所以沒有hover事件。那CSS :hover偽類就沒用了。但iPhone有Touch事件，onTouchStart 類似 onMouseOver，onTouchEnd 類似 onMouseOut。所以我們可以用它來模擬hover。使用Javascript：

再用CSS增加hover效果：

這樣設計一個鏈接，感覺可以更像按鈕。並且，這個模擬可以用在任何元素上。