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

時間 2019-11-12

標籤移動網頁設計經驗心得欄目無線简体版

原文原文鏈接

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

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

網頁設計無非是藍、黑、白，界面單調，而且要儘量的設計簡單。html5

如今狀況就大不相同了，軟件上webkit內核瀏覽器大行其道，硬件日新月異，網速來講，4g正炒得火熱。jquery

下面就和你們分享一下個人一些移動端網頁設計經驗與心得。css3

⒈ 分辨率
這應該是移動端網頁最關心的問題了，由於移動設備五花八門，各類分辨率都有。要想在這些設備上都能有良好的瀏覽體驗，得花一番功夫。web

使用viewport：這已是移動端網頁的必備了，它能夠設定頁面的寬度，是否容許縮放等等。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
```
通常設置width=device-width，就是設置爲設備的屏幕寬度，固然也能夠是具體數值ajax
百分比與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.js
Script/gameconfig.js


Image/home.png
Image/logo.png

##老是訪問網絡的內容
NETWORK:
*
##訪問A失敗時訪問B
FALLBACK
           
```
瀏覽器將緩存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" />，移動端上點擊會默認彈出數字鍵盤，可多試試
本文只是總結了我項目上一些當心得，若有紕漏和錯誤謝謝你們指正，也歡迎你們點贊和討論

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。