前端之移動端開發技巧

07-21

前端之移動端開發技巧

4 人贊了文章

目前移動前端開發正在逐漸步入前端技術的主流，其實跟PC端需要掌握的技術是一樣的，不過在PC 端上寫的頁面在多數情況下並不適用於手機端，必須知道這其中的注意點。當然移動端給人的感覺就是H5和CSS3，覺得最欣慰的就是不用再調IE兼容了。下面我總結一下移動端開發技巧和注意事項：

一、移動端常見的布局方式

1. 固定布局

固定布局是第一次做移動端時最好的選擇方式，思路沿用PC端，上手比較快。在<head>標籤里把viewport加好，然後設想整個網頁的寬度為320px即可。其他地方根據PC端來布局。缺點：大屏手機顯示網頁比較寬，固定布局寬度參照永遠是320px，導致左右兩邊會有空白。

2. 流動布局

流動布局重點就是使用百分比來代替傳統px作為單位（當前容器寬度除以父級容器實際寬度）。例如設計稿寬度為640px，上面有一個導航里包含四個菜單，四周邊距為20px，四個菜單等寬，那麼邊距應該為20px/640px=3.125%，每個菜單的寬度為100%/4=25%。demo里還有邊框，所以記得改變盒子模型，加box-sizing:border-box。優點：無論網頁寬度如何改變，四個菜單的寬度永遠一樣，並且等寬。

缺點：不夠靈活，如果菜單數量有變化，就滿足不了了。

3.浮動布局

通過使用float屬性，讓列表元素依次排列的布局（通常是左浮動，float:left）

對於浮動局部的局限性，就是每個列表元素的高度必須要一致，例如一個左浮動列表布局，如果第一行有個列表高度高於其他列表，那就在第二行，第一個元素會沿著最高元素的右側對齊，如下圖

但是這種浮動方式對於開發人員來說，這種循環是最簡單的。再加上:nth-child偽類處理邊距，所以，好多人都沒有放棄浮動布局。當然，現在大部分都不需要兼容老版本IE了，浮動的寫法也變得簡單許多。需要清除浮動的話，如下圖

4. Flexbox布局

例如上面第2點說的流動布局用百分比做的寬，局限性就是無法增加刪除菜單，改變菜單數量。如果改為用Flexbox布局，這個問題迎刃而解，不論菜單有多少個，都自動等寬排列成一行。具體想要學習Flexbox布局的，請參考下面的鏈接：http://www.w3cplus.com/css3/flexbox-basics.html

5. 混合布局

混合布局就是把所有學到的知識，靈活運用在布局中。

6. 定位布局

定位在移動端也用得挺多，特別是彈窗。

註：需要各位手機網站前端開發人員需要注意的常見問題：（1）雖然移動端不用寫:hover，但光寫個:active是不夠的。實測Android 2.3下按過的按鈕會留下瀏覽器默認顏色，所以記得給:visited也加個顏色。（2）遇到寫動畫animation時候，不要用到偽類上。不然Android是沒效果的。（3）用Flexbox做等分時，記得給寬度。不然Android里如果內容字數不一樣，會撐開。

二、meta標籤在開發webapp時的重要作用

1.此meta標籤是強制讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽，如下圖

註：width-viewport的寬度 height-viewport的高度 initial-scale:初始縮放比例 minimum-scale:允許用戶縮放到最小比例 maximum-scale:允許用戶縮放到最大比例 user-scalable:用戶是否手動縮放 2.手機上電話號碼默認值顯示，如下圖

若啟用電話功能telephone=yes時，具體調用格式為：如下圖

3. iOS設備對meta定義的私有屬性

（1）此meta標籤是iphone設備中的safari私有meta標籤，它表示：允許全屏模式瀏覽，如下圖

（2）此meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式，如下圖

註：默認值為content=」default」（白色），可以定為content=」black」（黑色）和content=」black-translucent」（灰色半透明）。若值為content=」black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。

4.頁面描述、頁面關鍵詞

5.搜索引擎抓取、不讓百度轉碼

6.UC強制豎屏、UC強制全屏、UC應用模式

7.QQ強制豎屏、QQ強制全屏、QQ應用模式

8.windows phone <a><input>標籤被點擊時產生的半透明灰色背景去掉，點擊無高光

三、樣式技巧處理

（一）文本的處理

1.關閉iOS鍵盤首字母自動大寫

2.單行文本溢出

3. 多行文本溢出

4. iOS中如何禁止用戶選中文字

通過指定文字標籤的-webkit-user-select：none;便可以禁止iOS用戶選中文字

（二）圖片、媒體的處理

1. 使用流體圖片 img{ width:100%; height:auto; width:auto9; }

2. audio元素和video元素在ios和andriod中無法自動播放　　應對方案：觸屏即播

3. 如何禁止保存或拷貝圖像通常當你在手機或者pad上長按圖像 img ，會彈出選項存儲圖像或者拷貝圖像，如果你不想讓用戶這麼操作，那麼你可以通過以下方法來禁止：

註：該方法只在 iOS 上有效。

（三）字體的處理

　　對於網站字體設置 1.移動端項目： font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self; 2.移動和pc端項目： font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

3.字體大小盡量使用pt或者em，rem，代替px。

4.設置input裡面placeholder字體的大小

5.解決字體在移動端比例縮小後出現鋸齒的問題： -webkit-font-smoothing: antialiased;

（四）圓角設置

一般按鈕設置圓角會比較美觀，設置圓角的值可以用百分比，也可以用em等單位。　

(五）iOS中如何徹底禁止用戶在新窗口打開頁面

如果需要禁止用戶在新窗口打開頁面，可以使用a標籤target=」_self「來指定用戶在新窗口打開，或target屬性保持空，但iOS的用戶在這個鏈接的上方長按3秒鐘後，iOS會彈出一個列表按鈕，用戶通過這些按鈕仍然可以在新窗口打開頁面，這樣的話，開發者指定的target屬性就失效了，但是可以通過指定當前元素的-webkit-touch-callout:none;來禁止iOS彈出這些按鈕。這個技巧僅適用iOS對於Android則無效。

(六）如何解決盒子邊框溢出

當指定了一個塊級元素時，並為其定義了邊框，設置了其寬度為100％。在移動設備開發過程中通常會對文本框定義為寬度100％，將其定義為塊級元素以實現全屏自適應的樣式，但此時該元素的邊框(左右)各1個像素會溢出了文檔，導致出現橫向滾動條，為解決這一問題，可以添加一個特殊的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小包括邊框的寬度。

（七）移動端取消touch高亮效果 　　在做移動端頁面時，會發現所有a標籤在觸發點擊時或者所有設置了偽類 :active 的元素，默認都會在激活狀態時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方法來禁止：

最後給大家推薦一些前端學習的網站，感興趣的可以看看：

http://www.w3cfuns.com/

http://www.xueh5.com/

http://www.w3school.com.cn/

http://www.jq22.com/

http://www.17sucai.com/

容聯技術乾貨推薦>>>

技術乾貨 | PushKit和CallKit實現——基於實時語音通話

技術乾貨 | HTML5之簡單的音視頻應用開發探尋

技術乾貨 | H.264 SVC技術介紹及應用分析

技術乾貨丨ELK日誌系統部署與優化