手機瀏覽器頁面知識收集（轉）

wap手機網頁css（wap css）

大部分手機如今都支持XHTML瀏覽器，這意味着咱們只需在stylesheets的類型設置成「handheld」即

* {
position: static !important;

float: none !important;
}

由於現行的手機的屏幕限制，沒有太多的空間去漂移,故提倡用靜態佈局和儘可能少的用float(ucweb6.0目前還不支持float)

爲了手機的流量，提倡儘可能少用背景圖background: none !important;

另外，有背景色的白字在部分手機上也是不支持的，故少用此效果（ucweb6.0目前也不支持）

解決Pocket PC 2003的Pocket IE內自動縮小

Pocket IE到了Pocket PC 2003以後，讀取頁面的速度提高很多，終於到了實用階段。新版的Pocket IE對於超過螢幕寬度的圖形也會自動縮小，避免橫向卷軸的出現。
自動縮圖的功能很不錯，可是卻沒有提供關閉的功能，形成原先在Pocket PC 2002上可以全螢幕顯示的Flash影片（240×320），到了Pocket PC2003以後，自動會縮小。這個問題如今有解了，只要在html頁面上加上〈meta name="MobileOptimized" content="240"〉就能夠了。

XHTML MP 經常使用的 Meta 信息

你能夠用 標籤爲你的 XHTML MP 文件指定一些經常使用的 meta 信息. 標籤應當被包含在 標籤之間. WAP 瀏覽器會忽略它不能理解的 meta 信息. 你能夠在一個 XHTML MP 文件中指定任何種類的 meta 信息而不影響頁面的顯示效果.
例如, 你或許想在你的 XHTML MP 文件中加入做者的名字而不在屏幕上顯示它.

〈meta name="author" content="linlin"/〉

XHTML MP 的緩存控制

標籤的用途之一是控制緩存中一個 XHTML MP 文件的過時時間. 緩存是無線設備中的一些內存空間, 這些空間臨時存儲着從服務器上下載下來的 XHTML MP 文件. 若是 WAP 瀏覽器發現所請求的某個 XHTML MP 文件位於緩存中而且尚未過時, WAP 瀏覽器將顯示緩存中的文件以最小化加載延遲. 若是你的 XHTML MP 頁面有對時間敏感的內容, 如財務數據, 你或許想把過時時間設置爲一個較小的值甚至爲 0, 以不至於使用戶稍後看到過時的 XHTML MP 頁面. 下面的 XHTML MP 例子展現瞭如何用 標籤將一個 XHTML MP 頁面的過時日期設置爲 0.

〈meta http-equiv="Cache-Control" content="no-cache"/〉
或者是〈meta http-equiv="Cache-Control" content="max-age=0"/〉

將一個 XHTML MP 文件的過時日期設置爲 300 秒

〈meta http-equiv="Cache-Control" content="max-age=300"/〉

XHTML MP 中的間歇性刷新
在 XHTML MP 中, HTTP 刷新可用於通知 WAP 瀏覽器間歇性刷新當前頁. 對於提供實時信息的移動互聯網瀏覽應用來講, 這是一個很是有用的功能. 在下面的 XHTML MP 代碼中, 頁面每 15 秒鐘自動被刷新一次. 要注意的是這個 XHTML MP 例子中須要 . 若是上述代碼沒被包含, WAP 瀏覽器將僅僅顯示緩存中的文檔的複本, 而不須要每次刷新都鏈接服務器.

〈meta http-equiv="Cache-Control" content="no-cache"/〉
〈meta http-equiv="refresh" content="15"/〉

HTTP 刷新可用於通知 WAP 瀏覽器在必定時間後去另外一個 URL. 你能夠利用此特徵把用戶重定向到另外一個 XHTML MP 頁面或者建立一個幻燈片，以下例子15 秒鐘後把用戶重定向到 "hello_world_example1.xhtml".

〈meta http-equiv="refresh" content="15;URL=hello_world_example1.xhtml"/〉

但注意, 某些 WAP 瀏覽器是不支持 HTTP 刷新的.
例外，幾個有用的meta信息

〈meta id="viewport" name="viewport" content="width=240; user-scalable=0;" /〉
〈meta http-equiv="Content-Type" content="text/html; charset=utf-8" /〉
〈meta name="MobileOptimized" content="240" /〉

viewport的meta標籤
網頁手機wap2.0網頁的head里加入下面這條元標籤，在iPhone的瀏覽器中頁面將以原始大小顯示，並不容許縮放。

〈meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"〉

其中：
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 容許用戶縮放到的最小比例
maximum-scale - 容許用戶縮放到的最大比例
user-scalable - 用戶是否能夠手動縮放

 

這個標籤主要是用來控制搜索引擎抓取網站的頻率，告訴搜索引擎多長時間來網站抓取一次。假如我設置，那這樣搜索引擎就是7天來一次。使用這個標籤的網站，一般是由於網站數據量很是大，被搜索引擎過於頻繁的抓取，會佔用過大的資源，影響網站的訪問。因此，但願搜索引擎不要每天過來，抓取過一次了，那麼等7天后再來。通常的網站是不須要這個標籤的。

wap2.0手機網頁的語言 XHTML MP 文檔的典型結構

〈?xml version="1.0"?〉
〈!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"〉
〈html xmlns="http://www.w3.org/1999/xhtml"〉
〈head〉
〈title>第一個手機頁面例子〈/title〉
〈/head〉
〈body〉
〈p〉你好. 歡迎來第一個手機頁面例子.〈/p〉
〈/body〉
〈/html〉

XHTML MP 以序言 (prolog) 開頭, 該序言中含有 XML 聲明和 DOCTYPE 聲明.
該序言組件並不是 XHTML MP 的元素, 所以不該該把它關閉, 也就是, 你不該該給它們加結束標籤或用 /〉 結束它們.

 

文檔的其他部分, 除了 HTML 中的 〈html〉 標籤不該該有 xmlns 屬性外, 與普通的 HTML 文檔相同.

XHTML MP 必須包含 〈html〉,〈head〉, 〈title〉, 和 〈body〉 元素.

XML 聲明與字符編碼格式:
全部 XHTML MP 都是 XML 文檔. 所以, 文檔的開始總會有 XML 聲明. XML 聲明指定了文檔的 XML 版本. 文檔的字符編碼也能夠在這裏指定, 像這樣:

〈?xml version="1.0" encoding="UTF-8"?〉

上面一行表述了 XHTML MP 文檔的 XML 版本爲 1.0, 字符編碼格式爲 UTF-8. 若是 XHTML MP 文檔的編碼格式爲 UTF-8 或 UTF-16, encoding 屬性能夠省略.

 

在XHTML MP 中, XML 聲明並不是必需的組件. 然而, 若是 XML 聲明被省略的話, 將會致使一些 WAP 瀏覽器出問題. 例如, 一些 Sony Ericsson 的 WAP 瀏覽器, 當接收到的 MIME 類型爲 text/html 時, 會利用 XML 聲明來區分 XHTML MP 和 IHTML (一個 NTT DoCoMo 定義的有專利的標記語言) 文檔: 若是文檔包含 XML 聲明, 它就是一個 XHTML MP 文檔, 不然它就是一個 IHTML 文檔.

DOCTYPE 聲明:
全部 XHTML MP 文檔都必須有 DOCTYPE 聲明. 該聲明應該放在 XML 聲明與 元素之間. 下面是 XHTML MP 的 DOCTYPE 聲明. 你能夠直接將其複製並粘貼到你的 XHTML MP 中.

〈!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"〉

DOCTYPE 指定了 DTD (文檔類型定義) 的名字 和連接到 DTD 的 URL. DTD 包含了關於標記語言的語法信息. 它定義了什麼元素和屬性能夠在標記中使用和使用它們的規則. 驗證工具, 經過把你的 XHTML MP 文檔與 DOCTYPE 聲明中指定的 DTD 進行比較, 可用於檢查你的 XHTML MP 文檔是否遵照了 XHTML MP 語言的規則. 一些 IDE 集成了相似的審覈工具.

 

〈body〉 元素:
〈body〉 元素用於實際內容的容器. 一個 XHTML MP 文件只能包含一個 〈body〉 元素, 文本不可直接被包含在 〈body〉〈/body〉 標籤對中. 例如, 下面的標記代碼在 XHTML MP 中是不正確的:

〈body〉 你好. 〈/body〉

要糾正上面的 XHTML MP 標記代碼, 文檔 body 中的文本必須被包含在其它元素, 如段落 (〈p〉〈/p〉), 列表 (〈ul〉〈li〉〈/li〉〈/ul〉 或 〈ol〉〈li〉〈/li〉〈/ol〉), 標題 (〈h1〉〈/h1〉, 〈h2〉〈/h2〉...), 等等, 之間. 下面的標記代碼在 XHTML MP 中是正確的:

〈body〉〈p〉你好.〈/p〉〈/body〉

手機網頁編碼須要遵循什麼規範？

遵循XHTML Mobile Profile規範，簡稱爲XHTML MP，也就是一般說的WAP2.0規範。 XHTMLMP是爲不支持XHTML的所有特性且資源有限的客戶端所設計的。它以XHTML Basic爲基礎，加入了一些來自XHTML 1.0的元素和屬性。這些內容包括一些其餘元素和對內部樣式表的支持。和XHTML Basic相同，XHTML MP是嚴格的XHTML 1.0子集。
網頁文檔推薦使用擴展名？

推薦命名爲xhtml，按WAP2.0的規範標準寫成html/htm等也是能夠的。但少數手機對html支持的很差。

爲何現今大多數的網站一行字數上限爲14箇中文字符？

因爲手持設備的特殊性，其頁面中實際文字大小未必是咱們在CSS中設定的文字大小，尤爲是在第三方瀏覽器中。例如Nokia5310，其內置瀏覽器 頁面內文字大小與CSS設定相符，可是第三方瀏覽器OperaMini與UCWEB頁面內文字大小卻大於CSS設定。經測試，其文本大概在16px左右。 假如屏幕分辨率寬度爲240px，去除外邊距，那麼其一行顯示14個字之內，是比較保險（避免文本換行）的作法。

使用WCSS仍是CSS？

WCSS (WAP Cascading Style Sheet 或稱 WAP CSS)是移動版本的CSS樣式表。它是CSS2的一個子集，去掉了一些不適於移動互聯網特性的屬性，並加入一些具備WAP特性的擴展（如-wap- input-format/-wap-input-required/display:-wap-marquee等）。 須要留意的是，這些特殊的屬性擴展並非很實用，因此在實際的項目開發當中，不推薦使用WCSS特有的屬性。

避免空值屬性

若是屬性值爲空，在web頁面中是徹底沒有問題的，可是在大部分手機網頁上會報錯。

網頁大小限制

建議低版本頁面不超過15k，高版本頁面不超過60k。