0-移動web開發之概述

語言: CN / TW / HK

1 移動web開發概述

    國內移動端瀏覽器大多采用webkit核心。那麼,什麼是瀏覽器核心?

1.1 瀏覽器核心

1.1.1 瀏覽器核心的作用

    核心,亦“心臟”,是瀏覽器最重要的部分——“Rendering Engine”,被譯為“渲染引擎”,一般習慣性地將瀏覽器的“渲染引擎”稱之為“瀏覽器核心”。     瀏覽器核心主要負責解析網頁語法並執行頁面渲染。所以,(雖然瀏覽器核心分為渲染引擎和JS引擎兩部分,但是)通常所說的瀏覽器核心就是指瀏覽器所採用的渲染引擎,它決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。

    每個人的心臟活力不同,瀏覽器核心也是如此。不同的瀏覽器核心對網頁內容的解析方式存在差異,因此,同一張網頁頁面在核心不同的瀏覽器裡面的渲染效果也可能不同。這也是在進行網頁開發時需要在不同核心瀏覽器中進行網頁效果測試的原因。

1.1.2 瀏覽器&瀏覽器核心

    (1)瀏覽器的主要功能是向伺服器傳送請求,並在接收到伺服器端的響應結果後,按照HTML和CSS規範中指定的方式(個瀏覽器並沒有完全遵守這些規範),解析響應結果,然後在瀏覽器視窗中顯示網路資源(包括:HTML文件、pdf、圖片、媒體檔案等)。

    (2)瀏覽器核心是瀏覽器的“心臟”,是支援瀏覽器執行的最核心的部分,主要可分為兩個部分:①渲染引擎;②JS引擎。

1.2 主流瀏覽器&瀏覽器核心

1.2.1 五大主流瀏覽器&四大核心

    五大主流瀏覽器:IE/Edge,Chrome,Safari,Opera,Firefox。

    四大核心:Trident(也稱IE核心)、webkit核心、Blink核心、Gecko核心。

    對應關係如下,

IE瀏覽器 Trident核心(也即IE核心)
Chrome瀏覽器 Blink核心
Firefox瀏覽器 Geoko核心(也即Firefox核心)
Safar瀏覽器 Webkit核心
Opera瀏覽器 Blink核心

1.2.2 其它常見的瀏覽器及其核心

360瀏覽器/獵豹瀏覽器 IE+Chrome雙核心
搜狗/遨遊/QQ瀏覽器 Trident(相容模式)核心+webkit(高速模式)
百度瀏覽器 IE核心
2345瀏覽器 IE+Chrome雙核心

1.2.3 國內瀏覽器及其核心總結

  • 使用的Trident單核,如:2345、世界之窗;
  • 使用Trident+Webkit/Blink雙核,如:qq、UC、獵豹、360、百度;
  • 使用Webkit/Blink單核,如:搜狗、遨遊。

1.2.4 移動端常見瀏覽器

    移動端常見的瀏覽器,像:UC瀏覽器、QQ瀏覽器、歐朋瀏覽器、百度手機瀏覽器、360瀏覽器、谷歌瀏覽器、搜狗手機瀏覽器、獵豹瀏覽器,以及其它。

1.2.5 總結

    國內的UC和QQ,百度等手機瀏覽器都是根據Webkit修改過來的核心,國內尚無自助研發的核心,也即:WebKit是目前主流的移動瀏覽器渲染引擎,對主流瀏覽器的相容性也比較好,在進行移動web開發時,主要需要處理Webkit核心瀏覽器。

1.3 移動端常見螢幕尺寸&相關技術方案

    僅列出部分,如下圖所示,

    從上圖中,可以看到移動裝置螢幕尺寸以英尺為單位,不同裝置對應的開發尺寸也各不相同。最後一列也出現了一個新的名詞“物理畫素比”。這是下面要討論的內容。

1.3.1 物理畫素比

    (1)物理畫素(物理解析度):是指裝置的螢幕解析度(物理級的),是真實存在的。 PS:我們所使用的顯示屏是由一個個物理畫素點組成的,通過控制每個畫素點的顏色,使螢幕顯示出不同的影象,螢幕從工廠出來那天起,它上面的物理畫素點就固定不變了,單位是pt(絕對單位)。

    (2)虛擬畫素(邏輯解析度):即CSS畫素,以px為單位(相對單位)。虛擬畫素的大小是可變的。

    (3)物理畫素比:表示物理畫素與虛擬畫素的比值,即:物理畫素/虛擬畫素。例如:物理畫素比為2,就意味著:需要使用2個物理畫素來(從物理級別提供支援)填充一個虛擬畫素。

    舉個例子:我們通常所看到的PC端瀏覽器中,物理畫素和虛擬畫素預設是1:1的關係,但是,當使用“按住Ctrl+滑鼠滾輪”的方式,將瀏覽器視窗進行縮放。

  • ①當放大為200%時,原始內容的大小變為原始的2倍。此時:物理畫素不會發生變化,它提供物理級別的渲染支援;而虛擬畫素在效果上會產生“二倍”的視覺體驗,但是px畫素值並未改變,僅僅是需要使用更多的2個pt來填充這1個虛擬畫素,即:物理畫素/虛擬畫素=2/1;
  • ②當縮小為50%時,原始內容的大小變為原始的0.5倍。此時:物理畫素不會發生變化,它仍舊提供物理級別的渲染支援;而虛擬畫素在效果上會產生“0.5倍”的視覺體驗,但是px畫素值並未改變,僅僅是需要使用更少的0.5個pt來填充這1個虛擬畫素,即:物理畫素/虛擬畫素=0.5/1。

    這裡所提到的的比值就是物理畫素比。

1.3.2 關於ppi&螢幕解析度

    在1.3.1中已經提到“螢幕是由很多畫素點組成的”,之前提到的解析度都指的是:手機螢幕的實際畫素尺寸。比如:480*800的螢幕,就是指整個手機螢幕是由800行、480列的物理畫素點組成的。在頁面渲染時,由每個物理畫素點發出不同顏色的光,從而構成我們所能夠看到的畫面。

    但是,從之前1.3下的圖中可以發現,手機的物理尺寸-英寸(1英寸約等於2.54釐米)和開發尺寸-畫素尺寸是不成比例的。例如:IPhone6和Nexus 4都是4.7英寸(約為:11.515釐米-對角線長度),但是前者的畫素尺寸為375px*667px,後者的畫素尺寸為384px*640px。這就涉及到ppi的概念。

    pixel per inch,譯為“每英寸的畫素個數”,術語為“畫素密度”,準確的說是:每英寸的長度上排列的畫素點數量。

    那麼上面提到的幾個引數:inch英寸、畫素尺寸:X px * Y px、ppi-畫素密度,它們有什麼具體的含義呢?它們之間存在什麼樣的關係呢?如下圖所示,

1.3.3 物理畫素比&視網膜屏技術

    早期手機的解析度和px是一一對應的,但是這種製作工藝會造成移動端螢幕顯示內容的模糊,即:通常所說的手機螢幕解析度很低。視網膜屏技術的出現就是為了解決這樣的問題。

    視網膜屏(Retina)技術就是將更多的物理畫素點壓縮到一塊有限尺寸大小的螢幕裡,從而達到更高的解析度,並提高螢幕顯示的細膩程度

    一句話總結“視網膜屏技術”就是:提高手機螢幕的畫素密度。並且通常使用ppi(pixel per inch),即:每英寸長度所能夠排列的畫素的數目來衡量視網膜屏的工藝程度。PPI數值越高,即代表顯示屏能夠以更高的畫素密度——更多的物理畫素顯示影象,物理畫素比越大,當然,可用於顯示的物理畫素越多,手機螢幕中畫面的擬真度就越高。

1.3.4 視網膜屏技術弊端&多倍圖的使用

    視網膜屏技術的推廣固然解決了手機螢幕解析度過低的問題,但是也帶來了一個新的問題:如果將低解析度的影象放置在一個高解析度的移動裝置上顯示,就會造成影象失真的問題(和照片被放大顯示而失真是一個原理)。多倍圖技術的出現是為了應對這個問題。

    多倍圖:即在標準的viewport裝置中,使用倍圖來提高圖片的解析度,解決低解析度圖片在高清裝置中顯示模糊的問題。

    舉個例子:要顯示一個50px*50px解析度的大小,但是在高清裝置中被顯示為100px*100px的圖片,就會造成圖片顯示模糊。因為:此時物理畫素比為:100 * ppi/50,(類似於降低解析度的自拍在高清裝置上放大顯示),會造成圖片的失真。

    那麼。現在換個思路:預先準備一張100*100的圖片,放在高清裝置中手動縮小為50*50,此時的物理畫素比為:50 * ppi /100,(類似於將高解析度的自拍在高清裝置上縮小顯示),這樣就可以保證影象不會失真,高清顯示。

1.3.5 多倍圖與background-size屬性

    要想在移動裝置上顯示多倍圖,就需要用到影象的縮放技術,在CSS中提供了background-size屬性,來控制背景圖的縮放比例。該屬性的取值如下所示,

    例如:現有一個600px*281px大小的盒子,需要一個背景圖,另有一張1200*562大小的二倍圖可以使用。

    那麼,對應的CSS程式碼可寫為,

.box {
            width: 600px;
            height: 281px;
            background-color: greenyellow;
            background-image: url('./images/bk1.jpg');
            /* 二倍圖縮放,也可以直接指定為與盒子相同大小的px */
            background-size: 100% 100%;
        }

2 移動端技術解決方案

2.1 移動端相容性問題&瀏覽器私有字首

    移動端瀏覽器基本上是以webkit核心為主,要考慮webkit的相容性問題。但是對於H5標籤和CSS3樣式,webkit都是支援的,所以可以放心使用。而對於瀏覽器的私有字首,只需要考慮新增webkit即可應對這種相容性問題。下面是京東移動端的瀏覽器私有字首新增方式,

.btns {
    position: relative;
    display: -webkit-box;/*-webkit瀏覽器私有核心字首*/
    display: -webkit-flex;/*-webkit瀏覽器私有核心字首*/
    display: flex;
    margin: 15px -15px 0
}

2.2 移動端樣式的初始化

    為什麼需要對移動端樣式進行初始化操作?

  • 1、html標籤有預設屬性
  • 2、各個瀏覽器對預設屬性的解釋會有不同而造成視覺效果不同。
  • 3、Normalize.css的作用就是給你沒有自定義樣式的預設標籤定義一個統一的樣式以保持各瀏覽器下視覺效果的統一。

    **移動端css初始化推薦使用normalize.css。**原因如下,

  • ①保護了有價值的預設值;
  • ②修復了瀏覽器的bug;
  • ③是模組化的;
  • ④擁有詳細的文件。

    其官網地址為:https://necolas.github.io/normalize.css/

2.3 CSS3盒子模型的使用

    在使用CSS盒子模型時,考慮到盒子模型內邊距(padding)、邊框(border)的影響,在設定邊距/邊框屬性時,會造成盒子width和height值的增大。     但是,CSS3盒子模型可以通過box-sizing屬性來指定盒模型盒子大小的計算方式,其屬性取值如下,

(1)content-box:盒子大小計算方式為【width+padding+border】——CSS3盒子模型的計算方式,推薦使用
(2)border-box:盒子大小計算方式為【width】——對應於傳統CSS盒子模型的計算方式,不推薦使用

    使用屬性值(2),就不會出現由於“內邊距+邊距”導致盒子變大的情況出現了。

2.4 特殊樣式-頁面佈局優化

    除了使用2.3提到的CSS3盒子模型,以解決由於border、padding導致盒子模型可能會被撐大的問題之外,還需要考慮到其他的問題,因此可以採用如下的CSS程式碼對頁面佈局進行優化處理。

3 移動端技術選型

    主要有兩種技術方案,

    (1)單獨製作移動端頁面(主流方案)。可選擇的技術方案包括:

            ①流式佈局(百分比佈局);

            ②flex彈性佈局;

            ③less+rem+媒體查詢佈局;

            ④混合佈局。

    (2)響應式頁面相容移動端。可選的技術方案包括:

            ①媒體查詢;

            ②bootstrap。