手機網站開發必修課[1]：手機瀏覽器

本文來自：http://www.fool2fish.cn/?p=290 前言： 頭大的是，除了自己公司已有的一些經驗，網上恐怕沒有過多的(公開的)文檔可以參考。 09年上半年的工作重心全在手機網頁開發上面，這使得自己某種程度上也成了拓荒者。現將這段時間的開發心得同大家分享以下，歡迎大家跟我交換自己的想法。 手機網站開發必修課系列文章計劃： 手機瀏覽器 來自wiki的解釋 對wiki的總結 瀏覽器兼容性測試 爲什麼要有兼容性測試：比web瀏覽器還恐怖的手機瀏覽器 目標用戶數據挖掘 安排測試，整理測試結果 測試結果對手機網站開發的指導意義 對設計的指引作用 確保裸html代碼具有較高可用性，謹慎使用html標籤 css使用注意事項 非常重要：代碼的優雅降級 注：由於有些數據牽涉到公司的商業機密，所以在這個系列的文章當中，有些可能不會公佈出詳細的數據，但會給出方向性的結論或者意見，請大家見諒。 手機有哪些瀏覽器？這些瀏覽器對xhtml、css和js的支持度怎麼樣？目標用戶的手機使用情況？條件限制下的手機界面設計要如何進行？如何快速搭建一個手機網頁？如何做好網站的兼容性工作？想必這些問題每個參與過手機網頁開發的人都遇到過。 要了解手機網站開發的訣竅，我們必須先了解手機瀏覽器。雖然百度“手機瀏覽器”沒啥有價值的文章，所幸google“mobile broswer”出來了比較多有價值的文章。那麼，站在前人的肩膀上，我們可以看的更遠。 以下文字翻譯自維基百科》手機瀏覽器:http://en.wikipedia.org/wiki/Mobile_browser 手機瀏覽器，又稱微瀏覽器、迷你瀏覽器或者無線因特網瀏覽器，是被設計用於像手機或者PDA之類的無線設施的網頁瀏覽器。手機瀏覽器針對在便攜設備上的小屏幕網頁顯示進行了專門的優化，以使網頁內容顯示最高效。手機瀏覽器的軟件必須小巧並且能適應無線掌上設備的低存儲量和低帶寬。它們一度是最簡樸的網頁瀏覽器，但是2006年以後有些手機瀏覽器能夠支持象css2.1、JavaScript和Ajax這樣的最新技術。那些被設計從手機瀏覽器訪問的網站叫無線門戶。 內容概覽 相關的技術 先驅們 流行的移動瀏覽器 被主流手機和PDA廠商使用的默認瀏覽器 用戶可安裝的手機瀏覽器 手機HTML代碼轉換機 更多 參考 更多外部鏈接 1 相關的技術 手機瀏覽器通常通過蜂巢網絡連接，通過無線局域網連接的手機瀏覽器數量也日漸增多，後者使用基於TCP/IP的HTTP並能顯示那些使用HTML, XHTML Mobile Profile (WAP 2.0), 或者WML (從HDML發展而來)編寫的網頁。WML和 HDML是適於通過低帶寬傳送數據的最簡樸的形式，而無線數據的連接被稱爲WAP。 在日本，DoCoMo定義了基於i-mode HTML的 i-mode服務，是壓縮HTML(C-HTML)的一種擴展，HTML的一個子集。 WAP 2.0指定了XHTML手機協議和WAP CSS，WAP CSS是是W3C標準的 XHTML和 CSS在移動設備上擴展的一個子集。 2 先驅們 那些被稱爲微瀏覽器的技術，諸如WAP， NTTDocomo的 i-mode平臺和Openwave的 HDML平臺點燃了人們對無線數據服務的第一次熱情。 第一個微型瀏覽器的誕生大約是在1997年， 當Unwired Planet 公司(後來發展爲 Openwave)將他們的”UP.Browser”放在AT&T公司的手持設備上以供用戶訪問HDML內容。 一家英國公司， STNC股份有限公司，在1997年的時候研發了一款叫做 HitchHiker的微型瀏覽器，並對這款裝備設計了全套的UI。這款微型瀏覽器(Webwalker)的演示平臺擁有每秒處理百萬條指令的能力。它是一個單核處理平臺，在類似於應用堆棧的處理器上跑着GSM堆棧。1999年 STNC被微軟收購，並且HitchHiker變身爲Microsoft Mobile Explorer 2.0,不同於之前的Microsoft Mobile Explorer 1.0。HitchHiker被認爲是第一款擁有統一標準的渲染模型的微型瀏覽器，它在一個客戶端遵從EcmaScript, WMLScript, POP3 和 IMAP 郵件等標準處理 HTML 和 WAP。儘管這個瀏覽器最終未被使用，但它確實可是使HTML 和 WAP在一個頁面上聯合使用，雖然這將使得其他的設備無法正確渲染該頁面。另外， Amstrad公司倒黴的將HitchHiker作爲他們e-m@iler和 e-m@iler+產品的操作系統，手機瀏覽器2.0在Benefon Q, Sony CMD-Z5, CMD-J5, CMD-MZ5, CMD-J6, CMD-Z7, CMD-J7 and CMD-J70.等設備上都可使用。 還有一款叫Palmscape的用於PalmOS的免費瀏覽器（雖然後來才成爲共享軟件的），由Kazuho Oku 1998年在東京編寫，他繼而發現了Ilinx，這款瀏覽器直到2003年才放開使用限制。 於2001年發佈的 Mobile Explorer 3.0增加了iMode的兼容性和衆多的專利設計。通過假想的將這些專利設計結合到WAP協議中， MME3.0執行了OTA數據庫同步、推送了email，推送了信息客戶端和PIM功能。已經退出市場的索尼愛立信CMD-Z700深度集成了MME3.0。MME的開發腳步在2002年中旬畫上了句號。 Opera Software公司以他的小屏幕渲染技術(Small Screen Rendering )和中屏幕渲染技術(Medium Screen Rendering)領先於該領域。Opera的的web瀏覽器可以讓普通的web網頁在小型屏幕和中型屏幕上重新佈局，並達到最優顯示。他是第一款廣泛支持Ajax和通過ACID2測試的瀏覽器。 3 流行的移動瀏覽器 手機瀏覽器和基於web的模擬器不同，基於web的模擬器使用一種“虛擬的手持設備”在電腦上顯示wap頁面，使用java或者html轉碼器。這些模擬器有 Wapjag, TT, Waptiger 和 Superwap。 一下表格列出了一些當下非常流行的手機瀏覽器。一些手機瀏覽器是web瀏覽器的精簡版本，因此一些手機瀏覽器廠商也提供用於臺式機和筆記本電腦的瀏覽器。 3.1 被主流手機和PDA廠商使用的內置手機瀏覽器 瀏覽器 |開發者| 開源 |渲染引擎| 軟件許可| 注意 Danger: browser Danger 否 - 專利的 installed on all Danger-designed devices including the T-Mobile Sidekick Embider: Infraware 否 - 專利的 [2] Internet Explorer Mobile: Microsoft 否 - 專利的 - Nokia Series 40 Browser: Nokia 否 - 專利的 - Novarra nWeb: Novarra 否 - 專利的 - Obigo Browser: Obigo AB 否 - 專利的 100% owned by Teleca AB Picsel Browser: Picsel Techologies 否 - 專利的 - jB5 Mobile Browser: Jataayu Software ? ? ? available on Symbian Series 60, Windows Mobile and Linux Wapaka Browser: Digital Airways ? ? ? Java micro-browser Myriad Browser (Previously Openwave Mobile Browser): Myriad Group 否 Fugu (Next version to use WebKit)[4] 專利的 Acquired from Openwave in 2008 Fennec: Mozilla 是 Gecko ? Currently in Beta BlackBerry Browser: Research in Motion 否 Mango 專利的 - Kindle Basic Web: Amazon.com 否 NetFront 專利的 - Blazer: Palm 否 NetFront 專利的 installed on all newer Palm Treos and PDAs NetFront: ACCESS Co., Ltd. 否 NetFront 專利的 - PlayStation Portable web browser: Sony 否 NetFront 專利的 - Opera Mobile: Opera Software 否 Presto 專利的 Capable of reading HTML and reformat for small screens, installed on many Phones Android browser: Google 是 WebKit Apache 2.0 and GPLv2 - Iris Browser: Torch Mobile Inc. ? WebKit ? Linux/ Qt and Windows Mobile Safari: Apple Inc No WebKit 專利的 on iPhone and iPod Touch Symphony: Motorola ? WebKit ? on MOTOMAGX Web Browser for S60: Nokia ? WebKit ? - Browser: Creator | FOSS| Current layout engine| Software license |Notes 3.2 流行的用戶可安裝的手機瀏覽器 Bolt[5] Bluelark Bluelark bought by Handspring Inc. Deepfish Beta from Microsoft, proxy-rendering browser. Doris by Anygraaf Oy (Vantaa, Finland) Fennec by Mozilla Foundation. IbisBrowser iPanel for Palm OS, jB5 Mobile Browser Beta from Jataayu Software. JOCA by InteracT!V, another proxy-rendering free software. Links2 on the Playstation Portable (requires custom firmware) Minimo by Mozilla Foundation (based on Gecko). NetFront Opera Mini by Opera Software - supports most features of stand-alone Opera, but can run on less capable phones by offloading memory-intensive rendering to proxy server (based on Opera Mobile running on a server). Opera Mobile by Opera Software - supports all modern web standards supported by desktop browsers, including XHTML, CSS2 and Ajax. Has advanced Small Screen Rendering that adapts regular pages to small screen (proprietary). Pixo by Sun Microsystems (Pixo acquired by Sun July 2003) PocketWeb by tlogic.de (Heidelberg, Germany) Official product page RocketBrowser Rocket Mobile, Inc. (Silicon Valley, CA). SAS Skweezer Skyfire Open Beta by Skyfire Labs. Supports Flash and Ajax and allows a fully functional PC web-like experience. Stanford Power Browser created in Stanford’s InfoLab [3] Steel Teashark - a free Java-based browser with a desktop-like layout [4] ThunderHawk by Bitstream Inc. (Cambridge, MA) UCWEB by UCWEB Technology Universe by OpenMobl Systems Webby Mobile by AnOriginalIdea WebViewer - a free Java based browser by Reqwireless WinWAP by Winwap Technologies Official product page 3.3 手機HTML代碼轉換機 手機HTML代碼轉換機將web內容重新格式化並壓縮成移動設備可用的內容，並且必須和內置的或者用戶安裝的手機瀏覽器配合使用。以下是幾個領先的手機HTML代碼轉換機服務。 Skweezer - used by Orange, Etisalat, JumpTap, Medio, Miva, and others Teashark Opera Mini 4 更多 web瀏覽器 i-mode 信息裝置(Information appliance) 用戶代理 模擬器列表 5 參考 無線門戶的定義 關於Openwave Openwave.2009.2009年2月26日尋回 Weather Underground網站爲手機用戶提供天氣服務 Myriad瀏覽器v9數據表（pdf） Myriad小組. 2009.2009年2月26日尋回 bolt瀏覽器官網 6 更多外部鏈接 W3C手機網頁第一步 — “W3C手機網頁第一步的目標是要讓用戶從移動設備訪問網頁成爲現實——Tim Berners-Lee, W3C 網站的創始人之一如是說. 用於小型信息設備的緊湊HTML —1998年2月 開放移動通信聯盟 黑莓瀏覽器開發者網頁 ItsNat 一個很多手機瀏覽器支持的基於Java的AJAX網頁框架 對wiki的總結 對於wiki中提到的瀏覽器類型，還有兩個頁面可供參考 手機瀏覽器型號查詢 ppk：手機類型和瀏覽器表格 看完整篇文章後，有一些問題要問問聰明的你 什麼是渲染引擎？什麼是瀏覽器？這是兩個最先要搞清楚的概念。 內置的手機瀏覽器，用戶安裝的手機瀏覽器和基於web的模擬器 每個瀏覽器都有相應的渲染引擎，因此有必要知道使用同一個渲染引擎的手機瀏覽器的頁面表現是否一致 國內主流的瀏覽器機型有哪些？國內用戶是否喜歡使用用戶自己安裝的瀏覽器。不管怎麼樣，作爲一個開發人員，應該儘量去體驗一下這裏提到的各種用戶可安裝的瀏覽器。 基於web的模擬器是前期測試很有效的工具，推薦使用safari,opera和firefox(需安裝插件) 如何保證手機網頁的開發效率（包括質量和速度哦）？ 以上這些問題，前兩點在本文中有提到，後面幾點希望大家能開動腦筋先想想，答案將在後續的文章中揭曉 建議用你自己的手機訪問一些國內較大的無線網站。比如 http://wap.taobao.com，http://wap.163.com等等