從零開始學 Web 之移動Web（一）屏幕相關基本知識，調試，視口，屏幕適配

時間 2019-11-08

標籤開始 web 移動屏幕相關基本知識調試適配欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的探索之旅吧！html

1、基礎知識

一、屏幕

移動設備與PC設備最大的差別在於屏幕，這主要體如今屏幕尺寸和屏幕分辨率兩個方面。前端

一般咱們所指的屏幕尺寸，實際上指的是屏幕對角線的長度（通常用英寸來度量）。git

而分辨率則通常用像素來度量 px，表示屏幕水平和垂直方向的像素數，例如 1920*1080 指的是屏幕垂直方向和水平方向分別有1920和1080個像素點而構成。github

二、長度單位

在Web開發中可使用px（像素）、em、pt（點）、in（英寸）、cm（釐米）作爲長度單位，咱們最經常使用px（像素）作爲長度單位。瀏覽器

咱們能夠將上述的幾種長度單位劃分紅相對長度單位和絕對長度單位。服務器

例如：iPhone3G/S和iPhone4/S的屏幕尺寸都爲 3.5 英寸（in）可是屏幕分辨率卻分別爲 480x320px、960x480px，由此咱們能夠得出英寸是一個絕對長度單位，而像素是一個相對長度單位（像素並無固定的長度）。微信

三、像素密度

DPI（Dots Per Inch）是印刷行業中用來表示打印機每英寸能夠噴的墨汁點數，計算機顯示設備從打印機中借鑑了DPI的概念，因爲計算機顯示設備中的最小單位不是墨汁點而是像素，因此用PPI（Pixels Per Inch）值來表示屏幕每英寸的像素數量，咱們將PPI、DPI都稱爲像素密度，但PPI應用更普遍，DPI在Android設備比較常見。網絡

利用屏幕分辨率計算 PPI :ide

四、設備獨立像素

隨着技術發展，設備不斷更新，出現了不一樣PPI的屏幕共存的狀態（如iPhone3G/S爲163PPI，iPhone4/S爲326PPI），像素再也不是統一的度量單位，這會形成一樣尺寸的圖像在不一樣PPI設備上的顯示大小不同。

以下圖，假設你設計了一個163x163的藍色方塊，在PPI爲163的屏幕上，那這個方塊看起來正好就是1x1寸大小，在PPI爲326的屏幕上，這個方塊看起來就只有0.5x0.5寸大小了。

可是作爲用戶是不會關心這些細節的，他們只是但願在不一樣PPI的設備上看到的圖像內容差很少大小，因此這時咱們須要一個新的單位，這個新的單位可以保證圖像內容在不一樣的PPI設備看上去大小應該差很少，這就是獨立像素，在IOS設備上叫PT(Point)，Android設備上叫DIP(Device independent Pixel)或DP。

舉例說明就是iPhone 3G（PPI爲163）1pt = 1px，iPhone 4（PPI爲326）1pt = 2px。

經過上面例子咱們不難發現 pt 同px是有一個對應（比例）關係的，這個對應（比例）關係是操做系統肯定並處理，目的是確保不一樣PPI屏幕所能顯示的圖像大小是一致的，經過 window.devicePixelRatio 能夠得到該比例值。

因此，咱們如何處理在不一樣 pt/px 比例上使得顯示相同大小的圖片呢？

很簡單，在美工設計圖片的時候，多設計幾種尺寸的圖片。

五、像素

5.一、物理像素

物理像素指的是屏幕渲染圖像的最小單位，屬於屏幕的物理屬性，不可人爲進行改變，其值大小決定了屏幕渲染圖像的品質，咱們以上所討論的都指的是物理像素。

獲取屏幕的物理像素尺寸：

window.screen.width;

window.screen.height;

5.二、CSS像素

CSS像素，與設備無關像素，指的是經過CSS進行網頁佈局時用到的單位，其默認值(PC端)是和物理像素保持一致的（1個單位的CSS像素等於1個單位的物理像素），可是咱們可通縮放來改變CSS像素的大小。

咱們須要理解的是物理像素和CSS像素的一個關係，1個物理像素並不老是等於一個CSS像素，經過縮放，一個CSS像素可能大於1個物理像素，也可能小於1個物理像素。

2、調試

一、模擬調試

現代主流瀏覽器均支持移動開發模擬調試，一般按F12能夠調起，其使用也比較簡單，能夠幫咱們方便快捷定位問題。

二、真機調試

模擬調試能夠知足大部分的開發調試任務，可是因爲移動設備種類繁多，環境也十分複雜，模擬調試容易出現差錯，因此真機調試變的很是必要。

有兩種方法能夠實現真機調試：

一、將作好的網頁上傳至服務器或者本地搭建服務器，而後移動設備經過網絡來訪問。（重點）

二、藉助第三方的調試工具，如weinre、debuggap、ghostlab(推薦) 等。

真機調試必須保證移動設備同服務器間的網絡是相通的。

3、視口

視口（viewport）是用來約束網站中最頂級塊元素<html>的，即它決定了<html>的大小。

一、PC 設備

在PC設備上viewport的大小取決於瀏覽器窗口的大小，以CSS像素作爲度量單位。

經過以往CSS的知識，咱們都能理解<html>的大小是會影響到咱們的網頁佈局的，而viewport又決定了<html>的大小，因此viewport間接的決定並影響了咱們網頁的佈局。

/* 獲取viewport的大小 */
document.documentElement.clientWidth;
document.documentElement.clientHeight;

在PC端，咱們經過調整瀏覽器窗口能夠改變 viewport 的大小，爲了保證網頁佈局不發生錯亂，須要給元素設定較大固定寬度。

二、移動設備

移動設備屏幕廣泛都是比較小的，可是大部分的網站又都是爲PC設備來設計的，要想讓移動設備也能夠正常顯示網頁，移動設備不得不作一些處理，經過上面的例子咱們能夠知道只要viewport足夠大，就能保證本來爲PC設備設計的網頁也能在移動設備上正常顯示，移動設備廠商也的確是這樣來處理的。

在移動設備上viewport再也不受限於瀏覽器的窗口，而是容許開發人員自由設置viewport的大小，一般瀏覽器會設置一個默認大小的 viewport，爲了可以正常顯示那些專爲PC設計的網頁，通常這個值的大小會大於屏幕的尺寸。

以下圖爲常見默認viewport大小（僅供參考）：

從圖中統計咱們得知不一樣的移動廠商分別設置了一個默認的viewport的值，這個值保證大部分網頁能夠正常在移動設備下瀏覽。

可是因爲咱們手機的屏幕很小，而 viewport 的值卻很大，因此頁面全部的內容就會縮小以適應屏幕，因此用手機看起來，這些字體和圖片就會特別小，這就像手機設置裏面有個電腦版顯示同樣。

要解釋上面的緣由，須要進一步對移動設備的 viewport 進行分析，移動設備上有2個viewport（爲了方便講解人爲定義的），分別是 layout viewport 和ideal viewport。

一、layout viewport（佈局視口）指的是咱們能夠進行網頁佈局區域的大小，一樣是以CSS像素作爲計量單位，能夠經過下面方式獲取

/* 獲取layout viewport */
document.documentElement.clientWidth;
document.documentElement.clientHeight;

經過前面介紹咱們知道，若是要保證爲PC設計的網頁在移動設備上佈局不發生錯亂，移動設備會默認設置一個較大的viewport（如IOS爲980px），這個viewport實際指的是layout viewport。

二、ideal viewport（理想視口）設備屏幕區域，（以設備獨立像素PT、DP作爲單位）以CSS像素作爲計量單位，其大小是不可能被改變，經過下面方式能夠獲取。

/* 獲取ideal viewport有兩種情形 */
/* 新設備 */
window.screen.width;
window.screen.height;

/* 老設備 */
window.screen.width / window.devicePixelRatio;
window.screen.height / window.devicePixelRatio;

理解兩個viewport後咱們來解釋爲何網頁會被縮放或出現水平滾動條：

其緣由在於移動設備瀏覽器會默認設置一個layout viewport，而且這個值會大於ideal viewport，那麼咱們也知道ideal viewport就是屏幕區域，layout viewport是咱們佈局網頁的區域，那麼最終layout viewport是要顯示在ideal viewport裏的，而layout viewport大於ideal viewport時，因而就出現滾動條了，那麼爲何有的移動設備網頁內容被縮放了呢？移動設備廠商認爲將網頁完整顯示給用戶才最合理，而不應出現滾動條，因此就將layout viewport進行了縮放，使其剛好完整顯示在ideal viewport（屏幕）裏，其縮放比例爲ideal viewport / layout viewport。

三、移動瀏覽器

移動端開發主要是針對IOS和Android兩個操做系統平臺的，除此以外還有Windows Phone。

移動端主要能夠分紅三大類，系統自帶瀏覽器、應用內置瀏覽器、第三方瀏覽器。

3.一、系統瀏覽器

指跟隨移動設備操做系統一塊兒安裝的瀏覽器，通常不能卸載。好比 iPhone 的 safari 瀏覽器。

3.二、應用內置瀏覽器

一般在移動設備上都會安裝一些APP例如 QQ、微信、微博、淘寶等，這些APP裏每每會內置一個瀏覽器，咱們稱這個瀏覽器爲應用內置瀏覽器（也叫WebView），這個內置的瀏覽器通常功能比較簡單，而且客戶端開發人員能夠更改這個瀏覽器的某些設置。

3.三、第三方瀏覽器

指安裝在手機的瀏覽器如FireFox、Chrome、360等等。

在IOS 和 Android 操做系統上自帶瀏覽器、應用內置瀏覽器都是基於Webkit內核的。

4、屏幕適配

通過分析咱們獲得，移動頁面最理想的狀態是，避免滾動條且不被默認縮放處理，咱們能夠經過設置 <meta name="viewport" content="">來進行控制，並改變瀏覽器默認的layout viewport的寬度。

一、viewport 詳解

viewport 是由蘋果公司爲了解決移動設備瀏覽器渲染頁面而提出的解決方案，後來被其它移動設備廠商採納，其使用參數以下：

經過設置屬性 content="" 實現，中間以逗號分隔。

示例：

<meta name="viewport" content="width=device-width, initital-scale=1.0, user-scalable=no">

width ：設置 layout viewport 寬度，其取值可爲數值或者device-width。

height：設置layout viewport 高度，其取值可爲數值或者device-height

initital-scale：設置頁面的初始縮放值，爲一個數字，能夠帶小數。

maximum-scale：容許用戶的最大縮放值，爲一個數字，能夠帶小數。

minimum-scale：容許用戶的最小縮放值，爲一個數字，能夠帶小數。

user-scalable：是否容許用戶進行縮放，值爲"no"（不能縮放）或"yes"（能夠縮放）。

注：device-width 和 device-height 就是 ideal viewport 的寬和高。

二、控制縮放

設置 <meta name="viewport" content="initial-scale=1">，這時咱們發現網頁沒有被瀏覽器設置縮放。

設置 <meta name="viewport" content="width=device-width">，這時咱們發現網頁也沒有被瀏覽器設設置縮放。

當咱們設置 width=device-width，也達到了 initial-scale=1 的效果，得知其實 initial-scale = ideal viewport / layout viewport。

兩種方式均可以控制縮放，開發中通常同時設置 width=device-width 和 initial-scale=1.0（爲了解決一些兼容問題）參見移動前端開發之viewport深刻理解 (http://www.cnblogs.com/2050/p/3877280.html)，即：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

三、適配方案

關於 em 和 rem

em 是相對長度單位（參照父元素），其參照當前元素字號大小，若是當前元素未設置字號則會繼承其祖先元素字號大小。

例如：.box {font-size: 16px;} 則 1em = 16px

.box {font-size: 32px;}則 1em = 32px，0.5em = 16px

rem 相對長度單位（參照 html 元素），其參照根元素(html)字號大小。

例如：html {font-size: 16px;} 則 1rem = 16px

html {font-size: 32px;} 則 1rem = 32px，0.5rem = 16px.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

從零開始學 Web 之 移動Web（一）屏幕相關基本知識，調試，視口，屏幕適配