view-port 那些事兒

時間 2019-12-06

標籤 view port 那些事兒简体版

原文原文鏈接

viewport 那些事兒

移動端的三個視口（update）

視口是 html 的父元素，因此咱們稱視口爲初始包含塊，html 元素的百分比是基於視口的。

佈局視口

在 PC 瀏覽器中視口只有一個並有 視口的寬度 = 瀏覽器窗口的寬度 ，而若是在移動端根據一樣的設計方案進行開發，網站會看起來很醜（由於手機屏幕要比 PC 顯示器窄的多），佈局視口就是瀏覽器廠商爲知足用戶的要求而提出的解決方案（即在手機上也能瀏覽爲 PC 端設計的網站）。
在移動端視口和瀏覽器窗口將再也不關聯，實際上佈局視口要比瀏覽器窗口大的多，在手機和平板中瀏覽器佈局視口的寬度一般在 768~1024 像素之間，咱們能夠經過如下代碼獲取佈局視口的寬度和高度：css

document.documentElement.clientWidth
document.documentElement.clientHeight

樣式佈局是根據佈局視口來計算的。

視覺視口

視覺視口便是用戶經過手機屏幕看到的區域。

理想視口

佈局視口並非理想的寬度，因此咱們須要 理想的佈局視口來知足咱們的需求（移動端更適合窄的網站），好比對於 iPhone5 來說其理想視口是 320*568，如下代碼能夠告訴手機瀏覽器把佈局視口理想化：

<meta name="viewport" content="width=device-width" />

上面代碼中的 width 指的是佈局視口的寬，而 device-width 實際上就是理想視口的寬度，咱們使用 meta 標籤的主要目的就是設置佈局視口的尺寸，讓佈局視口和理想視口匹配。

在響應式 mobile-web 開發中，常常能夠看到下面這行代碼：

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

舉例如 iphone6 手機，屏幕分辨率爲 1334×750，瀏覽器分辨率爲 667×375，它們的單位都是像素，可是很明顯在 mobile-web 開發中，咱們只考慮瀏覽器分辨率，而不考慮屏幕分辨率。咱們把瀏覽器的可視區域稱爲 visual-viewport，可是某些網站會由於可視區域過窄而產生各類各樣的顯示錯亂，因此瀏覽器會在默認狀況下把 viewport 設爲一個較大的值，這樣的話那些沒有考慮響應式設計的網頁也能夠在手機端正常顯示了（像在 PC 端顯示得同樣），咱們把這個虛擬的窗口稱爲 layout-viewport，下文中省略爲 viewport。
能夠把 layout-viewport 想像成爲一張不會變動大小或者形狀的大圖，而後想像你有一個較小的框架，並經過它來看這張大圖（管中窺豹），這個小框架的周圍被不透明的材料所環繞，掩蓋了你全部的視線，只留這張大圖的一部分給你，其中你經過這個框架所能看到的大圖的部分就是 visual-viewport。當你遠離框架時（縮小），你能夠看到大圖更多的部分；或者你也能夠靠近一些（放大）只看局部；而且你也能夠移動框架的位置以看到大圖的其餘部分。可是不管你怎樣操做這個小框架，大圖（layout-viewport）的大小和形狀永遠不會改變。html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=375"/> -->    
    <title></title>
</head>
<style>
    body {
        padding: 100px 0px 0px 0px;
        margin: 0px;
    }

    div {
        width: 375px;
        height: 100px;
        /* 寬度與瀏覽器寬度同樣 */
        color: white;
        font-family: "Microsoft Yahei";
        font-size: 1.5em;
        background-color: black;
        text-align: center;
        /* div塊內字體水平居中 */
        line-height: 100px;
        /* div塊內字體垂直居中 */
        margin: 0px auto;
        /* div塊居中 */
    }
</style>
<body>
<div>
    <strong>Hello World</strong>
</div>
</body>
</html>

上述代碼中設置 div 塊寬度爲 375px，與瀏覽器的寬度同樣，可是沒有聲明 viewport 屬性，結果並不如預期的同樣（文字塊佔滿瀏覽器的所有寬度），而是以下圖所示：

因此在手機端想要展現如咱們預期的網頁，必須設置 viewport 屬性：web

width（viewport 的寬度）：200~10000的整數 | 「device-width」

height（viewport 的寬度）：223~10000的整數 | 「device-height」

initial-scale（初始的縮放比例）：大於0小於10的浮點數

minimum-scale（容許用戶縮放到的最小比例）：大於0小於10的浮點數

maximum-scale（容許用戶縮放到的最大比例）：大於0小於10的浮點數

user-scalable（用戶是否能夠手動縮放）：「yes」 | 「no」

而且對於這些屬性，咱們能夠設置其中一個或者多個，而不須要同時設置，手機會根據已設置的屬性自動推算其餘屬性值，而非直接採用默認值。瀏覽器

設置 viewport 屬性 initial-scale=1.0 能夠獲得預期的效果，如上圖所示。設置 initial-scale=1.0 說明此時單位物理像素（device-pixel）等於顯示像素（css-pixel），手機不會自動縮放（即 viewport 的寬度爲 375px，與文字塊寬度相同，被其佔滿）。說到物理像素和顯示像素，兩者很容易混亂，其中最直觀的一點區別是：單位物理像素是不變的（其值一般能夠經過 screen.width/height 獲取），而單位顯示像素是相對的、可變的。在樣式設計中咱們給元素設置的寬度 width：128px，其單位是顯示像素，在寬度爲 1024px 的顯示器上會重複八次，瀏覽器在實現縮放時都是在「拉伸」像素，舉例如用戶將網頁放大到 200% 時，寬度爲 128px 的元素的 width 數值沒有改變，可是在寬度爲 1024px 的顯示器上只會重複四次，便是此時此刻單位顯示像素等於四單位物理像素，兩者改變了映射關係。
設置 viewport 屬性 width=375 或者 width=device-width 一樣能夠獲得預期的效果（注意此處的 device-width 與屏幕分辨率的寬度不相等，與媒體查詢中的 device-width 是不一樣的值）。框架

而且手機瀏覽器在展現網頁時，若手機屏幕的尺寸小於 viewport（默認爲 980px），則用戶看到的頁面是 viewport 按照手機屏幕的尺寸等比例縮放而來的（即自動適應 initial-scale 爲小於 1.0 的浮點數）；若手機屏幕的尺寸大於 viewport，則瀏覽器會自動擴展（expand），而不是縮放（zoom）。iphone

相關標籤/搜索

每日一句

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