手機瀏覽器頁面知識收集

標籤：

　　wap手機網頁css（wap css）
　　大部分手機現在都支援XHTML瀏覽器，這意味著我們只需在stylesheets的類型設定成“handheld”即

1 * {2 3 position: static !important;4 5 float: none !important;6 }

　　因為現行的手機的螢幕限制，沒有太多的空間去漂移,故提倡用靜態布局和盡量少的用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 文檔的典型結構

 1 〈?xml version="1.0"?〉 2 〈!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"〉 3 〈html xmlns="http://www.w3.org/1999/xhtml"〉 4 〈head〉 5 〈title>第一個手機頁面例子〈/title〉 6 〈/head〉 7  8 〈body〉 9 〈p〉你好. 歡迎來第一個手機頁面例子.〈/p〉10 〈/body〉11 〈/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。

手機瀏覽器頁面知識收集