前段時間瞭解學習了一下《移動Web手冊》,覺得真的需要這種不是偏向技術、框架或工具的書籍,只是單純的講解一些關於移動Web最基本的知識。正好今天整理一部分之前學習過的內容,記錄和分享,也方便以後查閱理解。 我們在開發移動端web時,經常跟瀏覽器打交道,你知道移動端的瀏覽器有幾種類型嗎?在測試移動we ...
前段時間瞭解學習了一下《移動Web手冊》,覺得真的需要這種不是偏向技術、框架或工具的書籍,只是單純的講解一些關於移動Web最基本的知識。正好今天整理一部分之前學習過的內容,記錄和分享,也方便以後查閱理解。
我們在開發移動端web時,經常跟瀏覽器打交道,你知道移動端的瀏覽器有幾種類型嗎?在測試移動web頁面時,我們不能忽略的瀏覽器又有哪些呢?
在開始之前,我們先簡單瞭解一下移動Web
一、移動Web是什麼
1. 移動web和桌面web沒有本質的區別,尤其是考慮到 響應式設計 的技術運行我們在大的電腦顯示器和小的手機屏幕上使用同一套CSS,我們可以把它理解為“運行在比你聽說過的還要多的瀏覽器上的支持小型觸摸屏的網站”
2. 但是移動web開發和桌面開發有些小小的區別,例如
- 如何適配不同大小的屏幕
- 如何相容安卓的眾多版本
- 為什麼有些css屬性在手機上不生效
- 手機上click事件有延遲
而上面的這些問題,是我們在移動開發中主要關註的話題,這些話題主要分為三類,它們是:
- 瀏覽器
- 視口
- 事件
先不要著急一口氣去瞭解和解決上面的問題(實際上,移動端web開發的問題可能是變幻莫測的,就瀏覽器而言,不同的廠商,不同的品牌手機,不同的操作系統,不同的內置瀏覽器,甚至同一種瀏覽器的不同版本都有可能對於移動端的某一些樣式或事件的支持不同。)本篇不介紹技術,著重介紹的是關於影響移動web開發的環境因素。先瞭解一下移動世界,這可能會對你進行web開發有所助益。
二、移動端瀏覽器
瀏覽器類型
手機上有4種瀏覽器類型:內置瀏覽器、可下載瀏覽器、代理瀏覽器以及WebView。這些瀏覽器在某些地方會重疊:一個瀏覽器不一定非要屬於一個類型。 比如:代理瀏覽器Opera Mini 被很多用戶下載,但是在某些功能手機上卻是內置瀏覽器。
下麵分別說一下不同的類型瀏覽器
1.內置瀏覽器
每部手機都有內置瀏覽器,也就是說,這個瀏覽器屬於固件,通常是操作系統廠商開發的,一般隨著系統升級而升級。下表列舉了不同平臺手機的內置瀏覽器:
大多數內置瀏覽器都被緊緊密集成到底層的操作系統中,也就是說,無法單獨升級瀏覽器。
2. 可下載瀏覽器
許多瀏覽器是用戶能夠下載並且自行安裝的。Opera、Firefox、Chrome還有UC,是其中幾個重要的瀏覽器。
在實踐中,只有安卓才可能有可下載的瀏覽器,因為iOS上不允許安裝其他的渲染引擎。
可下載瀏覽器相比於內置瀏覽器有一個優勢,就是只要有了新版本就可以更新。
3. WebView
WebView是留給原生應用的一個操作系統瀏覽介面。比如,一個游戲的幫助頁面可能是網頁,游戲應用會利用平臺的WebView來展示頁面。
蘋果不允許iOS設備上安裝其他渲染引擎。因此,其他瀏覽器想要在iOS上安裝就必須用蘋果的WebView。
4. 代理瀏覽器
代理瀏覽器的渲染引擎能夠解析和執行HTML、CSS還有JavaScript,但並不是運行在設備上,而是在遠程伺服器上。
與代理瀏覽器相對應的是完備瀏覽器。當用戶請求一個頁面,瀏覽器會通過http請求去抓取HTML、CSS、JavaScript還有一些其他資源,一旦一切就緒,就會去渲染和顯示頁面。這些步驟都是在客戶端上進行的,會占用記憶體、處理器時間和電池壽命。
代理瀏覽器渲染頁面步驟:
(1). 用戶請求一個頁面不會發送普通的http請求,而是通過一個加密連接發送一個特殊的請求到一個特殊的代理伺服器。
(2). 代理伺服器會發送正常的http請求給用戶希望訪問的web伺服器,它會請求HTML和其它資源。
(3). 代理伺服器包含一個渲染引擎,能夠正常渲染頁面
(4). 代理伺服器壓縮渲染頁面,成為該網站的某種圖片(想象為一個pdf或者一個圖像映射)
(5). 代理伺服器通過加密連接把這個文件發送到客戶端
(6). 客戶端把文件展示給用戶
代理瀏覽器優缺點:
優點:致力於為用戶省錢。因為代理瀏覽器所要做的事情就是顯示靜態文件,允許點擊或輕觸鏈接,生成簡單UI,所以它是輕量級的,甚至可以跑在低規格的手機上,用戶不需要買很貴的智能機就可以訪問網頁。
缺點:沒有客戶端交互。任何時候當代理瀏覽器遇到任何動態的事件時,它就必須的去請求伺服器給出新的指示。因此,在觸發和執行之間往往會有一秒或者更長事件的滯後 大多數不允許做某些事件,onscroll、resize、mouseout等
三、安卓平臺下的瀏覽器
先說明一下,這裡沒有介紹iOS下的瀏覽器,是因為iOS下的瀏覽器相對安卓而言不混亂。之前也提到過,蘋果不允許安裝其他渲染引擎。不過基於代理瀏覽器的特性,蘋果上可以安裝代理瀏覽器(但也不是所有代理瀏覽器都可以)。所以在蘋果手機上測試web頁面時,我們一般測試Safari瀏覽器即可,必要時可以測試代理瀏覽器。
下麵來說一下安卓
Web開發者在面對安卓時遇到的問題是,不像其它平臺,安卓的內置瀏覽器的情況很複雜,受到多方面因素的影響,正如前面所提到的,就瀏覽器而言,不同的廠商,不同的品牌手機,不同的操作系統,不同的內置瀏覽器,甚至同一種瀏覽器的不同版本都有可能對於移動端的某一些樣式或事件的支持不同。而安卓平臺的開放性,讓更多的手機廠商,瀏覽器廠商都可以開發自己的一個瀏覽器來增加設備或操作平臺的價值。這也就造就了安卓市場下的各瀏覽器的繁複和差異化。(例如,兩個不同手機廠商的內置瀏覽器在針對同一個web樣式上做了不同優化處理)
安卓瀏覽器
1. 安卓Webkit
一個智能手機操作系統需要一個瀏覽器,因此原始的安卓提供了他自己基於Webkit的瀏覽器,它沒有名字,我們稱它為“安卓WebKit”(內置瀏覽器)。
2. Chrome
基於WebKit的瀏覽器,谷歌想使用chrome來代替webkit。利於谷歌收集用戶數據並提供更強大的廣告。但是設備廠商更希望能夠自己獲取數據,並且是自己的設備與眾不同
3. 三星Chrome和其它瀏覽器
與Google Chrome是不一樣的。(版本和一些樣式支持的區別)
三個必須測試的瀏覽器
(1). 安卓WebKit4(富含不同的設備和不同版本的安卓系統)
(2). GoogleChrome
(3). 三星Chrome(三星高端手機)
註:檢測用戶代理字元串(navigator.userAgent),查看是否包含單詞chrome,如果有就是Chrome(不一定是GoogleChrome);如果不包含,就是安卓WebKit。
之前做的PPT的一個知識分享,現在又重新整理了一下,主要是為了記錄和重溫,不是很詳細,還是希望可以幫助感興趣的童鞋對移動端的一些知識有所瞭解。
感謝閱讀。