2011-04-28 37 views
3

我爲智能手機制作了單獨的網站,現在需要爲其他舊手機制作單獨的網站。 如何在舊屏幕/小屏幕手機上與手機網站的大部分設備達到最大兼容性?如何最大限度地兼容移動網站的大部分設備?

enter image description here

我想用

這DOCTYPE HTML爲

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" 
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"> 

,只選擇和性能,這是支持CSS Mobile Profile 2.0

  • 圖片不得使用很多和沒有 transp的arent圖像應採用舊 手機不支持
  • 的Javascript
  • 一些CSS 2.1選擇不 在舊的瀏覽器兼容
  • 佈局應該是不固定的寬度 因爲不同的屏幕尺寸 有
  • 不使用外部CSS是很好的。 CSS裏面將是一件好事
  • HTML 5 DOCTYPE將不被支持,所以我會用XHTML基本1.1
  • 沒有widthfloat應該是任何元素定義
  • HTTP請求應該是非常少
  • 沒有font-family應該定義

我不確定有些事情嗎?

  • 如果可能,我應該使用CSS精靈嗎?
  • 我應該在 而不是
  • 內嵌CSS比外部更好 CSS?
  • 我應該使用任何CSS重置代碼 CSS的評級?
  • 我應該使用utf-8還是ISO?
  • 是否可以使用表格 驗證?
  • 我不應該給任何鏈接哪個 打開一個新窗口?
  • 是否需要在 字體大小的位置使用em使用em?

我的觀點不夠好嗎?

雖然我要去閱讀詳細http://www.w3.org/TR/mobile-bp/,我還檢查http://html5boilerplate.com/mobile/但它是所有的,包括智能手機+,但有些東西是有用的

智能手機前端矩陣 https://spreadsheets.google.com/spreadsheet/ccc?authkey=CJPSkfwO&pli=1&hl=en&key=tLen0XZBVTziVZBzwwQFxlw&hl=en&authkey=CJPSkfwO#gid=0

手機屏幕分辨率,按品牌和型號排序 http://cartoonized.net/cellphone-screen-resolution.php

但您還有什麼建議考慮您的個人經驗,有沒有什麼建議?

回答

4

?這是一個XML頭,而不是HTML。

關於問題:

  • 圖像不應該使用太多,沒有透明圖像應使用

您可以使用透明GIF,他們有些支持。透明Png然而,不是。

  • 的Javascript舊手機

這不是不支持不支持。首先,JS在老瀏覽器上默認是禁用的。第二個問題是JS的錯誤執行。第三個因素是舊手機的資源有限,而且由於JS是客戶端,它可能會使手機崩潰/放緩。

  • 佈局應該沒有固定的寬度,因爲不同的屏幕尺寸是有

在移動,尖端總是與流體佈局(%爲基礎)

  • 這是很好的去不要使用外部CSS。 CSS裏面會好

內聯CSS是最好的舊設備,因爲他們大多有太多的請求或應用樣式到DOM時的問題。請記住,他們使用EDGE或甚至更糟糕的WAP連接,這幾乎與撥號一樣糟糕。

  • HTML 5 doctype不會被支持,所以我會使用XHTML Basic 1。1

您可以使用XHTML Basic或更好,<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

  • 沒有寬度和浮動應該對任何元素

寬度限定,始終%。浮動,從不。一直到S60 3rd FP1,Symbians上都有浮標。 (N73在S60 3rd上運行,浮點運算很麻煩,在N95的S60 3rd FP1上,浮點數在大部分用途上都是固定的,但仍然會出現問題,具體取決於使用情況)。這同樣適用於絕對位置和固定位置。

  • HTTP請求應該是非常少

減少可能的情況下。更多的請求,更多次蹩腳的WAP /邊緣需要得到的東西,更多的時間加載。

  • 沒有FONT-FAMILY應該被定義

家庭和大小兩件事情是惱人的舊設備。他們大多數都有自己的字體和大小。 例如:摩托羅拉V3R/RAZR V3擁有自己的字體,只有一種尺寸(如果我正確提醒,每個字母大約在7〜9像素的屏幕上)。但是你可以聲明Arial,因爲它是一種常見的字體,當瀏覽器擁有它時會被使用。

  • 如果可能,我應該使用CSS精靈嗎?

不惜一切代價避免。儘管減少了請求的數量,但您遇到了其他問題:您的佈局會變得流暢,而使用百分比時背景位置通常會變得紊亂。老黑莓喜歡用背景圖像來修補。

  • Inline CSS比外部CSS好嗎?

在我看來,是的。由於連接和渲染速度都很慢,如果你的css文件由於某種原因超時,(已經不好)佈局會變得更糟。

  • 我應該在css的評級中使用任何css重置代碼嗎?

我用YUI的一個,但是,真的老的瀏覽器(又V3R及附近)根本就沒有這麼多的差異。但是,當您向客戶展示時很好:P

  • 我應該使用utf-8還是ISO?

真的取決於您的內容是如何。如果你編碼所有的html實體(當使用拉丁字符時,例如)使用UTF-8。如果你不編碼,試試ISO。但無論如何,舊的瀏覽器強制它自己的編碼。檢查N95的瀏覽器,例如,你可以設置你自己的編碼,從而搞亂HTML的。

  • 是否可以使用表單驗證?

儘可能避免JS,總是去服務器端。

  • 我不應該給任何鏈接打開一個新窗口嗎?

舊瀏覽器沒有「標籤」支持,所以即使指定爲target =「_ blank」,它也會在當前頁面上打開。 我不會提醒,但S60的瀏覽器確實支持標籤,但有點隱藏功能。例如,N95 S60 3rd FP1 webkit瀏覽器不允許您在新窗口中打開鏈接,但如果使用了_blank,則會打開一個新標籤。並通過'標籤'cicle,你需要按'5'鍵。

  • 是否需要使用em來代替字體大小的px?

當您有一個腳本來增加字體大小(那些A/A +圖標)時,它的可靠性好。但正如我所說的沒有字體家族應該定義的問題。


一些提示:

=最老的黑莓瀏覽器都是垃圾,比IE5-6糟糕得多。所以,對於例如如果你想在你的主容器上有5px的左/右邊距,所以它可以顯示爲'居中',放棄邊距:0 5px;並進入border-left:5px solid #same_bg_color; border-right:5px solid #same_bg_color;悲傷,但它是什麼RIM:/

=總是嘗試你的佈局儘可能最垂直。不要在同一行堆疊太多東西。

=始終在文本中間設置導航錨點。舊設備導航從錨點跳轉到錨點(或S60 +中的「僞鼠標」),所以如果您到達頁面的末尾,則必須按'向上'多次。通過創建'Go To Top'或更好的方法來避免它,在頁腳上創建相同的頂層菜單。

=大部分時間不要亂用字體。顏色,大小,家庭將不會在大多數時間工作。

=所有這些技巧考慮「低」和一些早期的「中」的設備,下面我的個人設備排名:

高端設備:設備運行以下OS'es:iOS上, Android,WP7 +,Bada,bbOS 6.0+

中端設備:高端設備之前的設備。一些後來的Symbian S40系列和所有S60,最新的索尼/愛立信的Walkman在開始使用Android之前。

低端設備:所有其他,考慮WML,WAP1,黑莓,Windows Mobile(6。XX或更老),大多數的Symbian S40和更舊的,一切。

+0

感謝您的詳細答案 – 2011-11-03 18:49:49

+0

@JitendraVyas np。任何其他問題,請隨時詢問。順便說一句,我只是想提醒你..我在你的LinkedIn移動組; P – RaphaelDDL 2011-11-03 19:27:11

0

如果你必須確保你的網站將在所有設備上工作,你可能會爲什麼ü用<?xml version="1.0" encoding="UTF-8"?>想看看WALL http://wurfl.sourceforge.net/java/wall.php

+0

給我404這個網址 – RaphaelDDL 2011-11-04 02:21:56

+0

http://wurfl.sourceforge.net/ – nLL 2011-11-04 11:28:21