手機瀏覽器頁面知識收集

2021-05-24 23:52:20 字數 4452 閱讀 6826

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"/〉

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

將乙個 xhtml mp 檔案的過期日期設定為 300 秒

xhtml mp 中的間歇性重新整理

在 xhtml mp 中, http 重新整理可用於通知 wap 瀏覽器間歇性重新整理當前頁. 對於提供實時資訊的移動網際網路瀏覽應用來說, 這是乙個非常有用的功能. 在下面的 xhtml mp **中, 頁面每 15 秒鐘自動被重新整理一次. 要注意的是這個 xhtml mp 例子中需要 . 如果上述**沒被包含, wap 瀏覽器將僅僅顯示快取中的文件的複本, 而不需要每次重新整理都連線伺服器.

http 重新整理可用於通知 wap 瀏覽器在一定時間後去另乙個 url. 你可以利用此特徵把使用者重定向到另乙個 xhtml mp 頁面或者建立乙個幻燈片,如下例子15 秒鐘後把使用者重定向到 "hello_world_example1.xhtml".

但注意, 某些 wap 瀏覽器是不支援 http 重新整理的.

例外,幾個有用的meta資訊

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"  "

"〉〈html xmlns="

"〉〈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" "

"〉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〉

瀏覽器 CSS Hack 收集

所謂的hack就是只有特定瀏覽器才能識別這段hack hack 不是什麼好東西,除非沒有辦法,我們盡量還是不要用著玩意。下面是各個瀏覽器的css hack 列表。moz document url prefix 支援所有gecko核心的瀏覽器 包括firefox selector media scre...

pc瀏覽器模擬手機瀏覽器

很多 都通過user agent來判斷瀏覽器型別,如果是3g手機,顯示手機頁面內容,如果是普通瀏覽器,顯示普通網頁內容 谷歌chrome瀏覽器,可以很方便地用來當3g手機模擬器。在windows的 開始 執行 中輸入以下命令,啟動 谷歌瀏覽器,即可模擬相應手機的瀏覽器去訪問3g手機網頁 谷歌andr...

各大瀏覽器 CSS Hack 收集

hack就是只有特定瀏覽器才能識別這段hack hack 不是什麼好東西,除非沒有辦法,我們盡量還是不要用著玩意。下面是各個瀏覽器的css hack 列表。firefox 瀏覽器 moz document url prefix 支援所有gecko核心的瀏覽器 包括firefox selector w...