【Hello CSS】第三章-瀏覽器的檢視與座標

陳大魚頭發表於2019-03-23
CSS瀏覽器

在上一篇【Hello CSS】的第二章第二章-CSS的邏輯屬性與盒子模型中提了個問題：

為什麼Flex box跟Grid box的是以start、end為排列規則，而不是常規的top 、right 、bottom 跟left？

現在各位看官有答案了嗎？

因為上一篇中有提到過CSS 邏輯屬性的變革，從物理概念跳躍到了邏輯概念，也就是從top 、 right 、 bottom、 left更新為block、inline、start、 end。由於Flex box跟Grid box是CSS3的佈局模式，所以自然而然會使用更加適應於新時代的語言屬性。

上一篇主要介紹了CSS的邏輯屬性跟盒子模型的基本現狀。本篇則會介紹瀏覽器的檢視與座標。

關於裝置螢幕，我們應該知道的知識

畫素(Pixel)

畫素(pixel)是影像顯示的基本單位，一個畫素通常被視為影像的最小的完整取樣。用來表示一幅影像的畫素越多，結果更接近原始的影像。

我們看看下圖，圖中最小的點就是裝置的畫素。

【Hello CSS】第三章-瀏覽器的檢視與座標

解析度(Image resolution)

解析度(Image resolution)日常用語中之解析度多用於影像的清晰度。解析度越高代表影像質量越好，越能表現出更多的細節。

顯示解析度列表：zh.wikipedia.org/wiki/顯示解析度列…

下圖是不同解析度下的影像顯示

【Hello CSS】第三章-瀏覽器的檢視與座標

每英寸畫素(PPI)

每英寸畫素（英語：Pixels Per Inch，縮寫：PPI），又被稱為畫素密度，是一個表示列印影像或顯示器單位面積上畫素數量的指數。一般用於計量電子裝置螢幕的精細程度。通常情況下，每英寸畫素值越高，螢幕能顯示的影像也越精細。如上面解析度的圖顯示。

視網膜螢幕(Retina Display)

視網膜螢幕(Retina Display)是一種由蘋果公司設計和委託製造的螢幕。有研究表明，人類肉眼能夠分辨的最高PPI是300PPI，所以超過PPI超過300的往往被稱為Retina螢幕，這個概念是不對的，Retina螢幕指的是在人體正常使用距離下，無法用肉眼看到螢幕畫素的螢幕。

下圖為顯示了“地圖”二字的Retina螢幕

【Hello CSS】第三章-瀏覽器的檢視與座標

每英寸點數(DPI)

DPI（英語：Dots Per Inch，每英寸點數）是一個量度單位，用於點陣數位影像，意思是指每一英寸長度中，取樣或可顯示或輸出點的數目。如：印表機輸出可達600DPI的解析度，表示印表機可以在每一平方英寸的面積中可以輸出600X600＝360000個輸出點。

下圖為噴墨印表機以較低質量在約 0.25 平方英寸的範圍內按 150 dpi 列印的效果的特寫

【Hello CSS】第三章-瀏覽器的檢視與座標

裝置獨立畫素(DIP, DP)

裝置獨立畫素(Device Independent Pixels，DIP，又稱裝置無關畫素)是一種物理測量單位，基於計算機控制的座標系統和抽象畫素（虛擬畫素），是定義UI佈局時使用的虛擬畫素單位。

裝置畫素比(DPR)

裝置畫素比(DPR)是裝置上物理畫素和DIP的比例。公式如下：

window.devicePixelRatio = 物理畫素 / dips
複製程式碼

CSS畫素(CSS Pixels)

CSS畫素(CSS Pixels)是WEB程式設計中誕生的概念，用於定於瀏覽器中每個模型不同CSS的值大小。由於CSS畫素（CSS Pixels）是個邏輯性的畫素，而非物理性的畫素，所以1個CSS畫素在不同裝置上大小可能會有不同。但即便是如此，對於CSS來說，還是希望在不同裝置上大小盡可能地看起來相同。

那麼這該如何實現呢？

基於這個問題，W3C提出參考畫素這個概念。定義如下：

參考畫素是裝置上一個畫素的視角，畫素密度為96dpi，離裝置長一臂。標準的手臂長度為28英尺，所以視角大概為0.0213度。對於臂長的讀數，1px應該為0.26mm（1/96 英尺）。

如下圖：

【Hello CSS】第三章-瀏覽器的檢視與座標

所以1px CSS畫素大小該是多少？

基於這個問題，W3C給出的答案如下：

對於CSS裝置而言，這些尺寸要麼錨定(i)通過將物理單元與其物理測量關聯起來，或者錨定(ii)通過將畫素單元與參考畫素關聯起來。對於列印介質和類似的高解析度裝置，錨單元應該是標準物理單位之一（像英尺，釐米等）。對於低解析度的裝置和具有不尋常觀看距離的裝置，建議將錨單元作為畫素大圓。對於此類裝置，建議畫素單元參考最接近參考畫素的裝置畫素的整數。

以上就是1px CSS畫素的定義。也合理的解釋了為什麼顯示裝置的物理尺寸與物理畫素不同，但是同樣CSS值的元素大小卻相差無幾了。這是因為不同裝置的px實現的參考錨點不同。

如果想知道不同裝置螢幕的具體差異，可以參考這個網站：uiiiuiii.com/screen/inde…

螢幕尺寸怎麼算？

首先我們可以知道1英寸=2.54CM，基本所有的螢幕都以對角線來衡量尺寸。

手機螢幕常見尺寸有：5、6、5.5、6.5、7

筆記本一般是：10、12、13、14、15、18、19

想知道自己螢幕的尺寸可以使用勾股定理：

【Hello CSS】第三章-瀏覽器的檢視與座標

如果想知道你的顯示器尺寸，可以參考這個網站：zh.infobyip.com/detectdispl…

魚頭注：關於CSS的單位值，會在後面的章節講解，有興趣的千萬不要錯過。

檢視

視口(viewport)

視口(viewport)代表當前可見的計算機圖形區域。在 Web 瀏覽器術語中，通常與瀏覽器視窗相同，但不包括瀏覽器的 UI， 選單欄等——即指你正在瀏覽的文件的那一部分。

在WEB開發中，視口(viewport) 是個很重要的概念，尤其在響應式網頁設計中是必備的。

  • 通過上述一系列的名詞介紹，我們可以知道不同裝置的尺寸，解析度，CSS畫素大小都不盡相同，所以 視口(viewport) 的大小也就跟裝置相關。

  • 在尺寸較大的裝置中，在這些裝置上，應用顯示區域不一定是全屏的，viewport 是瀏覽器視窗的大小。

  • 在大多數移動裝置中，瀏覽器是全屏的，viewport 是整個螢幕的大小。
  • 在全屏模式下，viewport 是裝置螢幕的範圍，視窗是瀏覽器視窗，瀏覽器視窗大小小於或等於視口的大小，並且文件是這個網站，文件的大小可比 viewport 長或寬。

如何設定文件viewport？

文件viewport可以通過三種方式進行設定：

HTML標籤

第一種方式就是在HTML的<head></head>中引入

<meta name="viewport" content="">
複製程式碼

下面表格來自MDN

Value 可能值 描述
width 一個正整數或者字串 device-width 以pixels（畫素）為單位， 定義viewport（視口）的寬度。
height 一個正整數或者字串 device-height 以pixels（畫素）為單位， 定義viewport（視口）的高度。
initial-scale 一個0.0 到10.0之間的正數 定義裝置寬度（縱向模式下的裝置寬度或橫向模式下的裝置高度）與視口大小之間的縮放比率。
maximum-scale 一個0.0 到10.0之間的正數 定義縮放的最大值；它必須大於或等於minimum-scale的值，不然會導致不確定的行為發生。
minimum-scale 一個0.0 到10.0之間的正數 定義縮放的最小值；它必須小於或等於maximum-scale的值，不然會導致不確定的行為發生。
user-scalable 一個布林值（yes或者no） 如果設定為no，使用者將不能放大或縮小網頁。預設值為yes。

魚頭注：具體的作用跟屬性會在後面的章節講解，有興趣的千萬不要錯過。

CSS偽類選擇器@viewport

@viewport規則讓我們可以對文件的大小進行設定 viewport。這個特性主要被用於移動裝置，但是也可以用在支援類似“固定到邊緣”等特性的桌面瀏覽器，如微軟的Edge。

按百分比計算尺寸的時候，就是參照的初始視口（viewport）。初始視口指的是任何使用者代理和樣式對它進行修改之前的視口。桌面瀏覽器如果不是全屏模式的話，一般是基於視窗大小。

在移動裝置上（或者桌面瀏覽器的全屏模式），初始視口通常就是應用程式可以使用的螢幕部分。它可能是全屏或者減去由作業系統或者其它應用程式所佔用的部分（例如狀態列）。

語法如下：

@viewport {
    <group-rule-body>
}
複製程式碼

描述符：

屬性值 描述
min-width 設定viewport的最小寬度
max-width 設定viewport的最大寬度
width 同時設定 min-width 和 max-width
min-height 設定viewport的最小高度
max-height 設定viewport的最大高度
height 同時設定 min-height 和 max-height
zoom 設定初始縮放係數
min-zoom 設定最小縮放係數
max-zoom 設定最大縮放係數
user-zoom 設定使用者是能更改縮放係數
orientation 控制文件的方向
viewport-fit 控制非矩形螢幕上文件的顯示。

據can_i_use顯示，相容性幾乎全線飆紅。

【Hello CSS】第三章-瀏覽器的檢視與座標

對於我們在移動裝置上常用的viewport設定

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">
複製程式碼

就可以這麼來寫

@viewport {
    width: device-width;
    zoom: 1.0;
    min-zoom: 0.5;
    max-zoom: 2.0;
    user-zoom: zoom;
}
複製程式碼

VisualViewport

首先我們看Window.visualViewport

這是一個只讀的實驗性的web api，目前只有**chrome 60 +跟Opera 47+**支援。

屬性如下：

{
    height: 936, // 視覺視口高度，返回值為CSS畫素值。
    offsetLeft: 0, // 視覺視口邊緣與佈局視口左邊的偏移量
    offsetTop: 0, // 視覺視口邊緣與佈局視口頂邊的偏移量
    onresize: null, // 視覺視口大小變化時觸發
    onscroll: null, // 滾動視覺視口時觸發。
    pageLeft: 0, // 視覺視口邊緣的初始化包含原點的X座標，返回值為CSS畫素值。
    pageTop: 6680, // 視覺視口邊緣的初始化包含原點的Y座標，返回值為CSS畫素值。
    scale: 1, // 返回值為視覺視口的縮放比例
    width: 1364, // 視覺視口寬度，返回值為CSS畫素值。
}
複製程式碼

座標系統

通過上述對裝置螢幕跟視口的介紹，我們應該可以對電子裝置中的瀏覽器顯示情況有了基本的瞭解。那麼接下來我們來了解一下瀏覽器中的座標系系統。

迪卡爾座標系

早在初中開始，我們就開始接觸一個非常重要的概念 —— 笛卡爾座標系。在數學裡，笛卡爾座標系（英語：Cartesian coordinate system），也稱直角座標系，是一種正交座標系。

下圖是數學概念中的平面座標系：

【Hello CSS】第三章-瀏覽器的檢視與座標

下圖是數學概念中的三維直角座標系：

【Hello CSS】第三章-瀏覽器的檢視與座標

圖上資訊就不作過多的解釋了，有需要詳細瞭解的可以參考zh.wikipedia.org/笛卡爾座標系

WEB中的座標系統

上面介紹的是我們數學概念中的座標系，在WEB頁面中，也有相應的座標系統。計演算法則也相仿，只是它和我們數學中的概念有點不一樣，就是原點位於瀏覽器的左上角。整個瀏覽器螢幕就是第一象限，表現上只有正值，負值都隱藏了起來。無論是平面座標還是三維座標都是如此，只不過由於瀏覽器螢幕是個平面，所以三維座標中的Z軸是貫穿瀏覽器的。

平面座標系的座標值可以看以下圖示與DEMO：

【Hello CSS】第三章-瀏覽器的檢視與座標 【Hello CSS】第三章-瀏覽器的檢視與座標 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>平面座標系</title>
    <style>
      html,
      body,
      div {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      .poinerPosition {
        font-size: 2vw;
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div id="poinerPosition" class="poinerPosition"></div>
    <script>
      'use strict';
      window.addEventListener('pointermove', PointerEvent => {
        const {
          x,
          y,
        } = PointerEvent;
        poinerPosition.innerHTML = `
          (${x}, ${y})
        `;
        poinerPosition.style.left = `${x + 20}px`;
        poinerPosition.style.top = `${y}px`;
      });
    </script>
  </body>
</html>
複製程式碼

DEMO地址：krissarea.gitee.io/blog/css/cs…

魚頭注：關於CSS 二維與三維的影像跟動畫會在後續的章節進行講解，有興趣的可以繼續關注本系列。

參考資料

你真的瞭解css畫素嘛？

什麼是CSS畫素？什麼是參考畫素？

devicepixelrati

裝置畫素比devicePixelRatio簡單介紹

W3C

解析度

畫素

視網膜螢幕

每英寸畫素

每英寸點數

在移動瀏覽器中使用viewport元標籤控制佈局

Visual Viewport API

視口概念

VisualViewport

meta

Window.visualViewport

@viewport

[CSS] 淺談 @viewport 與 @media

【Hello CSS】系列

【Hello CSS】是以CSS基礎概念為主題的系列文章，旨在幫助大家更深刻地瞭解並且提高CSS在各位開發者心目中的地位。由於魚頭我水平有限，文筆有限，如果各位在文章中發現有任何不合理，不正確的地方，還煩不吝指出，我會非常感謝的；如果通過文章有任何想法或疑問，也希望各位能積極留言，我們互相探討；如果通過本系列文章有所收穫，這就讓魚頭我喜不自勝了！



如果你也喜歡`CSS`，喜歡探討技術，或者對本文，本系列有任何的意見或建議，魚頭非常希望你能加入一個有趣的微信群 — “進擊的CSS”。你可以掃描下方二維碼，新增魚頭微信，新增時註明 “加群”，如果你覺得我的文章有趣，歡迎關注微信公眾號“魚頭的Web海洋”。衷心希望可以遇見你。

【Hello CSS】第三章-瀏覽器的檢視與座標

下一篇

第四章-HTML的標籤與語意

歷史文章傳送門

  1. 序章-起源

  2. 第一章-CSS的語法與工作流

  3. 第二章-CSS的邏輯屬性與盒子模型

  4. 第三章-瀏覽器的檢視與座標

相關文章