移動web開發介紹——瀏覽器

来源:http://www.cnblogs.com/chunyangji/archive/2016/08/16/5776692.html
-Advertisement-
Play Games

前段時間瞭解學習了一下《移動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的一個知識分享,現在又重新整理了一下,主要是為了記錄和重溫,不是很詳細,還是希望可以幫助感興趣的童鞋對移動端的一些知識有所瞭解。

感謝閱讀。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 下麵列了五個例子來詳細說明,這幾個例子的主要功能是:在5秒後,自動跳轉到同目錄下的hello.html(根據自己需要自行修改)文件。1) html的實現 優點:簡單缺點:Struts Tiles中無法使用 2) javascript的實現 優點:靈活,可以結合更多的其他功能缺點:受到不同瀏覽器的影響 ...
  • JavaScript閉包 1、什麼是閉包 百度百科對於閉包的解釋是:閉包是指可以包含自由(未綁定到特定對象)變數的代碼塊;這些變數不是在這個代碼塊內或者任何全局上下文中定義的,而是在定義代碼塊的環境中定義(局部變數)。 以代碼進行闡釋: 這樣在執行完var c=a()後,變數c實際上是指向了函數b, ...
  • (上述代碼是改過後正確的)今天在用ajax的時候!出現了愚蠢的錯誤!由於括弧太多加上自己又粗心了!把最後的第68行的發送請求寫到了第63行的大括弧里變了~!導致我找了快一個小時的錯誤了!!!!!!淚奔o(>_<)o ~~發現這個錯誤後我“北京癱”了十分鐘o(>_<)o ~~ ...
  • ...
  • ...
  • 1. 使用樣式表 可以通過document.styleSheets屬性訪問文檔中可用的CSS樣式表,它會返回一組對象集合,這些對象代表了與文檔管理的各個樣式表。 每個樣式表 都由一個CSSStyleSheet 對象代表,它提供了一組屬性和方法來操作文檔里的樣式。 1.1 獲得樣式表的基本信息 第一步 ...
  • <body> <div id="date"></div> </body> <script type="text/javascript"> function getTime () { var now = new Date(); var future = new Date("01/01/2018 00: ...
  • 如果一個站是寬屏的,你左右拖動瀏覽器的視窗網站寬度會隨著視窗的大小而改變,而瀏覽器視窗寬度減小到一定程度後就會出現下邊的滾動條,網站寬度就不會再減小了,我們知道這一簡單的功能用css的min-width就很容易能實現,但不幸的是,我們用戶很多的IE6不支持這個非常方便的屬性,怎麼辦呢,我們只要在網頁 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...