移動端網頁設計經驗與心得

最後更新：2017-07-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：解析度並且 margin 中文使用流量 height post cal

智能手機發展確實很迅速，像今年，我的大部分工作就都在移動端網頁上。

再往前些年，看到的手機版/移動版網頁，限制於瀏覽器與手機效能，2g網路速度等

網頁設計無非是藍、黑、白，介面單調，並且要儘可能的設計簡單。

現在情況就大不相同了，軟體上webkit核心瀏覽器大行其道，硬體突飛猛進，網速來說，4g正炒得火熱。

下面就和大家分享一下我的一些移動端網頁設計經驗與心得。

⒈ 解析度
這應該是移動端網頁最關心的問題了，因為行動裝置五花八門，各種解析度都有。要想在這些裝置上都能有良好的瀏覽體驗，得花一番功夫。

使用viewport：這已經是移動端網頁的必備了，它可以設定頁面的寬度，是否允許縮放等等。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
```
一般設定width=device-width，就是設定為裝置的螢幕寬度，當然也可以是具體數值
百分比與max(min)-width使用：移動端網頁不僅解析度不一，而且隨時可以橫豎屏切換，所以百分比寬度設定非常必要，再配合max(min)-width限制最大(小)寬度，能有效適應各種解析度，若為此還有特別需求，可看下一條，"使用Media Queries"
使用Media Queries，這也是響應式web設計的一部分

<link rel="stylesheet" type="text/css" href="style1.css" media="screen and (min-width: 640px)">

這裡的意思就是在大於640px的螢幕寬度下，使用style1樣式，也可以寫在樣式內部，如：

@media screen and (min-width: 640px){        .d1{background:#ccc;}        }

⒉ 內容與緩衝
雖才說到現在4g正炒得火熱，但不可否認行動裝置網路環境上的局限性，所以還是有必要對此做一些處理。

使用manifest緩衝
```
<html manifest="/mobile.manifest">
```
在html上添加manifest，其中檔案格式內容如：
```
CACHE MANIFEST##需要離線的內容CACHE:Script/jquery.jsScript/gameconfig.jsImage/home.pngImage/logo.png##總是訪問網路的內容NETWORK:*##訪問A失敗時訪問BFALLBACK           
```
瀏覽器將緩衝chache內所有的內容，並且可以離線訪問，只要檔案發生任何改變都將會重新讀取並重新整理全部緩衝，所以更改注釋是個更新緩衝的好方法
這裡要注意的是
1，添加了manifest的當前網頁也會被緩衝 所以推薦的方式是頁面緩衝，頁面動態內容全部用ajax擷取，所以在移動網站項目設計開始就要注意這個問題
2，頁面中添加iframe 然後子頁面引用manifest想達到緩衝資源而不緩衝當前頁面內容，是無效的。
儘可能使用css樣式來代替圖片，由於移動端瀏覽器對css3的支援，使得以前很多圖片可以用樣式來代替
如我們公司項目內用到的一些，：

按鈕用到了漸層+圓角+內陰影
```
.btn_red {display: block;line-height: 28px;padding: 1px 0;border: 1px solid #B81414;border-radius: 2px;background: #FF5A5A;background: -webkit-gradient(linear, 0 0, 0 70%, from(#FF5A5A), to(#FF4444));overflow: hidden;margin-top: 3px;color: #fff;box-shadow: 0px 1px 1px #FFB5B5 inset;}
```
三角形就是用border的顏色，改變顏色可以畫出指向不同方向的三角形
```
.tip_t{border-color: transparent transparent #bb0808 transparent;border-style: solid;border-width: 10px;width: 0px;height: 0px;}
```
箭頭是兩個三角形疊在一起
……
用樣式代替圖片之後不僅大小減少了很多，可維護性更大大提高
頁面只展示部分內容，多提示使用者"點擊展開"或者"查看更多"，再非同步擷取內容，大家都不希望開啟一個網站，流量就嘩嘩沒了

⒊ 布局
手機端可視地區小，布局上不同於傳統網頁，需要充分利用有限的空間去展示資訊。

頁面流程簡單清晰，複雜的操作盡量分段展示，如：
隱藏不常用的功能，可以將其放在側邊欄或彈出層，如：
由於移動端是直接用手指操作，而非滑鼠。所以，需要響應元素點擊地區要相對明顯，大
螢幕寬度雖小，但是上下滑動體驗好，因此布局上可以多上下排列

⒋ 其他與結語

許多小廠商的手機平板，還有一些rom上的系統預設瀏覽器版本各異(很頭疼..)，所以測試工作要做足
html5中<input /> type有好幾種新類型，比如<input type="tel" />，移動端上點擊會預設彈出數字鍵台，可多試試

移動端網頁設計經驗與心得

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

移動端網頁設計經驗與心得

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support