移動/手機前端開發入門總結

我的博客：

http://mcchen.club

---

 

 

1.首先是meta標籤

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認的工具欄和菜單欄 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設置蘋果工具欄顏色 --> <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數字識別爲電話，忽略email識別 --> <!-- 啓用360瀏覽器的極速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微軟的老式瀏覽器 --> <meta name="MobileOptimized" content="320"> <!-- uc強制豎屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ強制豎屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC強制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ強制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC應用模式 --> <meta name="browsermode" content="application"> <!-- QQ應用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 點擊無高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- 適應移動端end -->

 

2.Html5+Css3的使用

　　由於手機大多數都是高級瀏覽器，HTML5能夠實現一些HTML4中沒法實現的豐富的WEB應用程序的體驗，能夠減小開發者不少的工做量，固然了你決定使用HTML5前，必定要對此很是熟悉，要知道HTML5的新標籤的做用。好比定義一塊內容或文章區域可以使用section標籤，定義導航條或選項卡能夠直接使用nav標籤等等。

　　按鈕帶有圓角效果，有內發光效果還有高光效果，這樣的按鈕使用CSS3寫是沒法寫出來的，固然圓角可使用CSS3來寫，但高光和內發光卻沒法使用CSS3編寫，

這個時候你不妨使用-webkit-border-image來定義這個按鈕的樣式。-webkit-border-image就個很複雜的樣式屬性。

　　還有漸變，動畫等你可以想象出的各類酷炫狂拽吊炸天的效果。

 

3.塊級化a標籤　　

　　由於大多數都是觸屏手機，要讓用戶很方便的能點擊到標籤，建議用42X42。操做對象的大小符合手指的操做，按鍵的大小設置規範：食指點擊的間距 約爲7*7 mm， 1mm間距，拇指點擊8*8 mm，2mm間距。當前推薦的值爲9mm 大小，最小應不小於7mm。

 

4.自適應佈局

　　在編寫CSS時，我不建議前端工程師把容器（不論是外層容器仍是內層）的寬度定死。爲達到適配各類手持設備，我建議前端工程師使用自適應佈局模式（支付寶採用了自適應佈局模式），由於這樣作可讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都可以正常的顯示，你無需再次考慮設備的分辨率。頁面必須自適應屏幕大小，能夠採用流體佈局。其它一些小問題能夠採用media query，好比對於圖片的處理，只要設置寬度，讓圖片自適應，防止圖片變形，固然要兼容的設備分辨率差距很大的時候，須要利用media queries根據分辨率的不一樣加載不一樣的圖片（須要同一張設置爲幾種不一樣的規格）,一是防止小分辨率設備加載大圖片浪費流量，二是防止大分辨率設備加載小圖片致使的圖片模糊問題。

 

5.適當優雅降級

　　要作好優雅降級（平穩退化），少用JS，圖片，要用戶禁止下載JS和圖片的時候頁面也能體現價值（由於不少APP默認設置爲3G下是不自動下載圖片等資源的）。

 

6.字體大小與行間距

　　不建議使用px/em，而使用rem，雖然它是相對單位，但使用rem單位能夠避開不少層級的關係而行間距則直接是採用字體的倍數。爲了方便計算，在html元素中常將font-size設爲62.5%。注意在chorme是會強制等於12的~

 

 

七、IOS在第三方輸入法下不支持onkeyup事件 
使用oninput進行代替onkeyup事件 
$("#user-name")[0].oninput = function() { 
that.checkusername(); 
};

 

八、部分android系統中元素被點擊時產生的邊框怎麼去掉 
android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果

a,button,input,textarea{ 
-webkit-tap-highlight-color: rgba(0,0,0,0;) 
-webkit-user-modify:read-write-plaintext-only; 
} 
-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符

另外，有些機型去除不了，如小米2

對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤

 

九、winphone系統a、input標籤被點擊時產生的半透明灰色背景怎麼去掉 
<meta name="msapplication-tap-highlight" content="no">

 

十、webkit表單元素的默認外觀怎麼重置 
.css{-webkit-appearance:none;}

 

十一、移動端如何清除輸入框內陰影 
在iOS上，輸入框默認有內部陰影，但沒法使用 box-shadow 來清除，若是不須要陰影，能夠這樣關閉：

input, 
textarea { 
　　border: 0; /* 方法1 / 
　　-webkit-appearance: none; / 方法2 */ 
}

 

十二、移動端禁止選中內容 
.user-select-none { 
-webkit-user-select: none; /* Chrome all / Safari all / 
-moz-user-select: none; / Firefox all （移動端不須要） / 
-ms-user-select: none; / IE 10+ */ 
}

 

1三、移動端取消touch高亮效果 
在作移動端頁面時，會發現全部a標籤在觸發點擊時或者全部設置了僞類 :active 的元素，默認都會在激活狀態時，顯示高亮框，若是不想要這個高亮，那麼你能夠經過css如下方法來進行全局的禁止：

html { 
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連接的a標籤換成其它標籤，能夠解決這個問題。

 

1四、如何禁止保存或拷貝圖像（IOS） 
一般當你在手機或者pad上長按圖像 img ，會彈出選項 存儲圖像 或者 拷貝圖像，若是你不想讓用戶這麼操做，那麼你能夠經過如下方法來禁止：

img { -webkit-touch-callout: none; }

 

1五、屏幕旋轉的事件 
window.orientation，取值：正負90表示橫屏模式、0和180表現爲豎屏模式；

window.onorientationchange = function(){ 
switch(window.orientation){ 
case -90: 
case 90: 
alert("橫屏:" + window.orientation); 
case 0: 
case 180: 
alert("豎屏:" + window.orientation); 
break; 
} 
}

 

1六、audio元素和video元素在ios和andriod中沒法自動播放 
應對方案：觸屏即播

$('html').one('touchstart',function(){ 
audio.play() 
})

 

1七、手機拍照和上傳圖片 

<input type=file accept="image/*"> 

<input type=file accept="video/*"> 
使用總結：

ios 有拍照、錄像、選取本地圖片功能 
部分android只有選取本地圖片功能 
winphone不支持 
input控件默認外觀醜陋

 

1八、消除transition閃屏 
.css{ 
/設置內嵌的元素在 3D 空間如何呈現：保留 3D/ 
-webkit-transform-style: preserve-3d; 
/（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）/ 
-webkit-backface-visibility: hidden; 
} 
開啓硬件加速

解決頁面閃白 
保證動畫流暢

.css { 
-webkit-transform: translate3d(0, 0, 0); 
-moz-transform: translate3d(0, 0, 0); 
-ms-transform: translate3d(0, 0, 0); 
transform: translate3d(0, 0, 0); 
} 
設計高性能CSS3動畫的幾個要素

儘量地使用合成屬性transform和opacity來設計CSS3動畫， 不使用position的left和top來定位 利用translate3D開啓GPU加速