 |
| 昵稱：奈薇建站網(wǎng) |
| 論壇積分：108000 |
| 發(fā)貼等級：21 |
    
    |
| 發(fā)貼數(shù)：1156 |
| 回貼數(shù)：1282 |
被砸雞蛋： 1 |
獲贈鮮花： 182 |
|
 |
|
|
發(fā)表時間：2015/11/2 23:40:00 |
樓 主 |
|
 |
|
 |
|
【轉(zhuǎn)】手機網(wǎng)頁設(shè)計注意事項和解決方法-1
手機網(wǎng)頁設(shè)計注意事項和解決方法-1
1.?基本手機網(wǎng)頁設(shè)計
1.1wap端的網(wǎng)站表頭
wap端的網(wǎng)站，寫的時候首先注意表頭，因為是手機端的，所以和我們平常用的web端頁面的不一樣，表頭為：
1.2盡量少使用水平滾動。
水平滾動除了比較費時之外，用戶還將難以判斷他們在整個頁面中的位置。如果可能，設(shè)計的內(nèi)容不要寬于或長于目標設(shè)備的顯示屏。盡量保證一行出現(xiàn)14個字符，或者用<br/>換行，或者設(shè)寬為100%，以便內(nèi)容會根據(jù)用戶手機屏幕的大小自適應(yīng)往下排。
1.3避免過多使用文本強調(diào)屬性，如粗體，斜體和下劃線等，因為這降低了小顯示屏上內(nèi)容的可讀性。
1.4盡量少用float。
?因為現(xiàn)行的手機的屏幕限制，沒有太多的空間去漂移,故提倡用靜態(tài)布局和盡量少的用float(ucweb6.0目前還不支持float)
1.5為了手機的流量，提倡盡量少用背景圖
另外，有背景色的白字在部分手機上也是不支持的，故少用此效果
1.6刪除代碼內(nèi)不必要的空白區(qū)和代碼內(nèi)的注釋?
確保代碼內(nèi)沒多余的空白區(qū)非常重要。雖然空白區(qū)在屏幕上是不可見的。但然要被處理，因為瀏覽器要對空白區(qū)進行分析、排版、css分配和顯示等。XHTML代碼內(nèi)注釋數(shù)量盡量減少，以使代碼盡可能地緊湊。
1.7使用內(nèi)部樣式表。
一般而言，雖然使用外部樣式表無論如何都有可能把樣式從標記語言中分離出來，這是一種好的方法，但應(yīng)注意權(quán)衡考慮。如果樣式定義包含在XHTML代碼中，則XHTML頁面的顯示就更快。
但是外部樣式表的使用提供一種在整個服務(wù)中更改樣式的便利方法。在整個服務(wù)器中應(yīng)該使用相同的外部樣式表已避免把多個樣式表下載到電話上。外部樣式表僅需下載一次并能夠保存在高速緩存器中。
所以我們盡量寫在xhtml里面，把一些相同的通用的建一個外部樣式表。這樣便于更快的打開手機頁面。
1.8謹慎使用表格。
因為手機上盡量不讓用float布局，那我們?yōu)榱朔奖悴季?，大部分都使用table來布局。
如果要用嵌套表格，當明確指定子表格的寬度時。開發(fā)人員應(yīng)避免用子表格寬度的一定比例來指定其父表格的寬度。因為設(shè)備具有不同的屏幕尺寸，所以百分比不一定能夠表示相同數(shù)量的像素。所以我們在表格中要使用絕對寬度，注意必須確保表格的總寬度與所有列的寬度加上邊框和單元格間隔的總和是一樣的。
1.9盡可能減少圖像數(shù)量和減小圖像容量大小。
頁面上的沒一幅圖像就產(chǎn)生一次獨立的來回。這反過來使整個頁面的現(xiàn)實速度減慢。因此建議在全部服務(wù)中各個頁面使用相同的圖像，那么一個特定的圖像只需下載一次且能夠保存到高速緩存器中。
1.10定義圖片的高度和寬度屬性。
在標記語言中明確地指定圖像的高度和寬度，以使瀏覽器為圖像預(yù)留適當?shù)目臻g。這不影響XHTML頁面的完整下載和處理時間，但卻大打改善用戶的感受，因為在下載圖像之前用戶可瀏覽頁面。
??????例：<imgsrc="images/001.gif"width="175"height="41"/>
1.11網(wǎng)頁文檔使用擴展名命名為?"?.xhtml"
推薦命名為xhtml，按WAP2.0的規(guī)范標準寫成html/htm等也是可以的。但少數(shù)手機對html支持的不好。
1.12使用WCSS還是CSS？
WCSS(WAPCascadingStyleSheet或稱?WAPCSS)是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適于移動互聯(lián)網(wǎng)特性的屬性，并加入一些具有WAP特性的擴展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。需要留意的是，這些特殊的屬性擴展?并不是很實用，所以在實際的項目開發(fā)當中，不推薦使用WCSS特有的屬性。
1.13網(wǎng)頁大小限制
建議低版本頁面不超過15k，高版本頁面不超過60k。
1.14網(wǎng)頁之間的空隙。
網(wǎng)頁之間的空隙我們一般用空格表示，因為手機中不會說文字之間有太大的距離，所以一般用空格"?"表示，或者margin和padding值也可以用，但最好不要超過10px。
1.15避免空值屬性
?如果屬性值為空，在web頁面中是完全沒有問題的，但是在大部分手機網(wǎng)頁上會報錯。
? |
|
 |
 |
 |
|
奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ |
|
|
|
|
|