Viewport詳解

時間 2019-12-20

原文原文鏈接

移動端與桌面端最明顯的區別就在於屏幕的大小。在比桌面端屏幕小很多的手機移動端上作web開發，網頁的佈局將會是一個全新的課題。所以首先咱們須要瞭解的就是一個與屏幕大小息息相關的屬性–Viewport。
Viewport

Viewport翻譯成中文能夠叫「視窗」或者是「視口」，它表示的是用戶網頁的可視範圍（指頁面可以被瀏覽的範圍）。一個針對移動端優化過的網頁的meta標籤以下：

<meta name='viewport' content='width: device-width, init-scale=1.0'>



咱們來分析一下viewport的屬性值：

    width：控制viewport的寬度，這個值能夠被指定，例如：500px。亦或者是「device-width」，意思是設置視口寬度爲設備寬度。
    height：控制viewport的高度。
    initial-scale：初始縮放比例，即每一次加載時頁面縮放的比例。
    maximum-scale：容許用戶縮放到的最大縮放比例。
    minimum-scale：容許用戶縮放到的最小縮放比例。
    user-scaleable：是否容許用戶縮放，能夠傳「yes」或「no」

舉一個例子來講明以上的屬性，咱們來建立這樣一個網頁：javascript

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        h3{
            display: inline-block;
        }
    </style>
</head>
<body>
    <h3>瀏覽器寬度：</h3><span id="deviceWidth"></span>
    <br/>
    <h3>設備的DPR：</h3><span id="deviceDPR"></span>
    <script type="text/javascript">
        $('#deviceWidth').text(document.documentElement.clientWidth);
        $('#deviceDPR').text(window.devicePixelRatio);
    </script>
</body>
</html>

這是將viewport的width屬性設置爲「device-width」的狀況，假如咱們將寬度設置爲600px，那麼頁面將會寬於設備屏幕寬度，也就是說頁面此時能夠左右滾動。
css

咱們看到在寬度設置爲設備寬度時瀏覽器寬度顯示爲375px，然而，事實上iPhone6/7/8的設備寬度應該是750px，那爲何應該與設備同樣寬的瀏覽器寬度卻不是750px呢？若是你觀察力足夠好，相信你已經發現了一些端倪，設備真實寬度正好是瀏覽器寬度的2倍，而DPR也剛好是2。是的沒錯，下面給出一個式子：

DPR=設備像素/設備獨立像素

設備像素：物理像素，設備實際擁有的像素。
設備獨立像素：邏輯像素，表明應用使用的像素，例如CSS使用的像素。

那麼咱們在知道DPR以後，咱們就能夠將CSS像素正確轉換爲設備像素，從而在不一樣移動端正常顯示圖片和樣式。

接下來看一下initial-scale這個屬性，

initial−scale=設備寬度/網頁顯示寬度

也就是說當這個值小於1時，網頁是被放大的。
---------------------
版權聲明：本文爲CSDN博主「Meskjei」的原創文章
原文連接：https://blog.csdn.net/hjc256/article/details/83097907html

相關標籤/搜索

每日一句

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