viewport (視口)

視口(viewport)

視口(viewport)是用來約束網站中最頂級塊元素的, 即決定了的大小

PC設備

在pc設備上viewport的大小取決於瀏覽器窗口的大小, 以css像素做爲度量單位(pc端 視口(virewport大小與瀏覽器大小一致)).
經過以往css的知識, 咱們都能理解的大小是會影響到個人網頁佈局的, 而viewport又決定了的大小, 因此viewport間接的並決定了個人網頁佈局.

移動設備

移動設備的屏幕廣泛是比較小的, 可是大部分的網站又都是爲PC設備來設計的, 要想讓移動設備也能夠正常顯示網頁, 移動設備不得不作一些處理;
在移動設備上viewport再也不受限於瀏覽器窗口, 而是容許開發人員自由設置viewport的大小, 一般瀏覽器會設置一個默認大小的viewport, 爲了可以正常顯示那些轉爲pc設計的網頁, 通常這個值的大小會大於屏幕的尺寸.

viewport

移動設備上有2個viewport(爲了方便講解人爲定義的), 分別是layout viewport 和ideal viewport
layout viewport(佈局視口): 指的是咱們能夠進行網頁佈局區域的大小, 一樣以css像素的計量單位, 能夠經過下面方式獲取;

document.documentElement.clientWidth
    document.documentElement.clientHeight

若是要保證爲PC設計網頁在移動設備上佈局不會發生錯亂, 移動設備會默認設置一個較大的viewport, 這個viewport實際指的是layout viewport

---

ideal viewport(理想視口):設備屏幕區域,(以設備獨立像素PT, DP做爲單位) 以CSS像素做爲計量單位, 其大小是不可能被改變的 經過下面方式能夠獲取
獲取ideal viewport有兩種情形

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

viewport 標籤

<!-- 對viewport的設置的meta建議寫在已有的meta標籤後面(<meta charset="UTF-8">) -->
    <!-- name="viewport":說明當前meta標籤是用來設置viewport的屬性, 這個屬性只有在移動端纔會有效 -->
    <!-- content="width=device-width" : 進行viewport的設置 width: 設置viewport的寬度 device-width:獲取當前設備的寬度 -->
    <meta name="viewport" content="width=device-width">

    <!-- initial-scale=1: 設置初始縮放比例 當設置了 width="device-width", 也達到了 initial-scale=1的效果
    其實initial-scale=1 = ideal viewport / lay viewport 意味着initial-scale=1, 至關於設置兩個viewport的寬度一致 -->
    <meta name="viewport" content="initial-scale=1.0">

    <!-- 爲了兼容性 通常狀況下 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- maximum-scale: 設置最大縮放比例
    minimum-scale: 這是默認狀態下最小的縮放比例
    user-scalable: 設置是否容許用戶縮放 no/yes -->
    
    <!--快捷鍵 meta:vp + tab鍵-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum=1.0, minimum=1.0">

移動端常見適配方案

1. 設置<meta name="viewport" content="width=device-width", initial-scale=1.0">
2. 設置頁面寬度爲百分比