最近寫移動端整理了一些入門級的知識，比較實用，如取消移動端的默認樣式，取消點擊表單后的延遲時間等，都是日常項目中碰到的問題，部分整理自網絡，部分按照自己的理解，如果有更好的建議希望大家評論補充
一、移動端種類、分辨率大小
說明：以主流的iPad、iPhone為例。
工具：Resizer官網：Resizer
用法：將通欄處寫有“Click or Bookmark”的藍色按鈕拖拽至標簽欄（加入收藏，注意，不是上面的官網地址） 。先打開要進行測試的頁面，再點擊已加入收藏夾的標簽即可。此時被測試頁面頂部會多出一條工具欄，于是就可以根據需求任意進行測試。
分辨率：預設的分辨率有（可切換橫版，豎版）
普通智能手機：320×480
iPhone5：320×568
普通平板：800×600
iPad2、3、mini：768×1024
寬屏電腦：1280×800
HDTV：1920×1080
另外，也可以自定義分辨率。
2.節省樣式的加載
目前而言，要改變網站的配色方案或者寫iPad專用的樣式表，是通過如下代碼：
@media only screen and (min-device-width:640px) { … }//例如，適應某設備的分辨率
其實，沒有必要這樣讓你的樣式表白白超載?？梢酝ㄟ^下面這個方法去加載指定分辨率下的樣式。
這樣的好處是，只有當你的使用相應的設備，才能加載到相應的樣式表。
二、meta標簽
1)
//強制讓文檔的寬度與設備的寬度保持1:1，
//文檔初始化縮放比例是1:1，
//不允許用戶點擊屏幕放大瀏覽，
//允許用戶縮放到的最大比例，
//尤其要注意的是content里多個屬性的設置一定要用分號+空格來隔開，如果不規范將不會起作用。
其他屬性有：
width;
height;
initial-scale;
minimum-scale;
maximum-scale;
user-scalable;
2)
//iPhone私有標簽，它表示：允許全屏模式瀏覽
3)
//iPhone私有標簽，它指定的iPhone中safari頂端的狀態條的樣式
4)
//不識別郵件和不把數字識別為電話號碼
三、CSS3 -webkit
1、問題描述：移動端表單類有圓角、陰影，點擊鏈接時，有灰色底高亮等
1) 消除被點擊元素的外觀變化，所謂的點擊后高亮：
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
2) 阻止旋轉屏幕時自動調整字體大?。?webkit-text-size-adjust:none;
3) 解決字體在移動端比例縮小后出現鋸齒的問題：-webkit-font-smoothing: antialiased;
4) 盒子陰影：-webkit-box-shadow: none;
5) 圓角：-webkit-border-radius: 0;
6) appearance 屬性使元素看上去像標準的用戶界面元素，
也可以取消默認的樣式：-webkit-appearance: none;
7) 鼠標可以懸停在內容上（指向該內容）而不激活它（單擊它）：-webkit-touch-action: manipulation;
四、使用自適應模式布局
為了讓用戶在safari中正常的瀏覽網頁，我們必須保證用戶的設備處于任何一個方位時，safari都能夠正常的顯示網頁內容（也就是自適應），而且自適應之后也不用考慮分辨率的問題。
比如：-webkit-box，流體盒模型，這是一種自適應的解決方案。
五、App icon 制作
說明：所謂單機模式，其實就是通過把網站添加到主屏，由主屏進入并訪問網站的一種方式。通常，app icon是自動截取網站的一部分截圖。這樣并不是很美觀，但也可以通過代碼來解決這個問題。
尺寸：在iPhone上的默認大小是57px，在iPad上是72px。icon原始圖片建議尺寸為128px或者256，并且不建議自行添加光影效果，因為OS自帶了。
// 若想去掉系統自帶的反光效果，可以增加“-precompsed”屬性。
App Icon 設計資源：
圖標模板：App Icon Template
設計靈感：iOS Icon Gallery，Hongkiat
制作工具：MakeAppIcon，iconkit（付費軟件）
其他技巧
Float屬性替換
使用display：inline-block屬性代替；因為float不適用于反向停靠和無法接受水平間隙
檢測用戶是通過主屏啟動你的web app
從主屏啟動的web app和瀏覽器訪問web app最大的區別 是它清除了瀏覽器上方和下方的工具條，這樣web app就更加像是native app了。
window.navigation.standalone
if(!window.navigation.standalone) {
…// do your magic
}
此外，還可以通過以下方式，停留在單機模式中。
//最簡單的方法
onclick=”window.location.href=this.href; return false”>QmyO
//改進一下，寫成函數
function openLink(anchor) {
window.location.href = anchor.href;
return false;
}
//調用
//更廣泛的使用，如頁面導航
/* 創建一個全局點擊事件監聽器 */
document.addEventListener(“click”, clickHandler, false);
function clickHandler(e) {
var element = e.target;
/* 只處理錨標簽元素 */
if (element.localName.toUpperCase() != ‘A’) {
return;
}
/* 忽略target屬性。*/
if (!!element.getAttribute(‘target’)) {
return;
}
var url = element.href;
/* 忽略不符合https正則規范以為的內容并區分來源 */
var match = url.match(/^https?:\/\/(.+?)\/.*$/);
if (!match || match[1] != window.location.host) {
return;
}
/* 最后打開全屏幕視圖的鏈接，來防止默認行為 */
window.location.href = url;
e.preventDefault();
}
//注意：當a標簽含有子標簽如：
這個腳本就不起作用了，因為接收事件的不是鏈接，而是img標簽。
但其他情況下都能使用戶留在單機模式內。當點擊外部鏈接時，OS可能會跳至瀏覽器。
如何解決盒子邊框溢出當指定了一個塊級元素時，并且為其定義了邊框，設置了其寬度為100％。在移動設備開發過程中我們通常會對文本框定義為寬度100％，將其定義為塊級元 素以實現全屏自適應的樣式，但此時，該元素的邊框(左右)各1個像素會溢了文檔，導致出現橫向滾動條，為解決這一問題，可以為其添加一個特殊的樣式：
-webkit-box-sizing:border-box;
//用來指定該盒子的大小包括邊框的寬度。
自動大寫與自動修正
關閉這兩項功能，可以通過autocapitalize 與autocorrect 這兩個選項
橫板與豎版
方法一：
// 肖像模式樣式
// 風景模式樣式
方法二：
//肖像模式樣式
#landscape { display: none; }
//風景模式樣式
#portrait { display: none; }
轉載請注明：前端徐遠?干貨：Web App 響應式頁面制作筆記
