Viewport详解

移动端与桌面端最明显的区别就在于屏幕的大小。在比桌面端屏幕小不少的手机移动端上做web开发，网页的布局将会是一个全新的课题。因此首先我们需要了解的就是一个与屏幕大小息息相关的属性–Viewport。
Viewport

Viewport翻译成中文可以叫“视窗”或者是“视口”，它表示的是用户网页的可视范围（指页面能够被浏览的范围）。一个针对移动端优化过的网页的meta标签如下：

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



我们来分析一下viewport的属性值：

    width：控制viewport的宽度，这个值可以被指定，例如：500px。亦或者是“device-width”，意思是设置视口宽度为设备宽度。
    height：控制viewport的高度。
    initial-scale：初始缩放比例，即每一次加载时页面缩放的比例。
    maximum-scale：允许用户缩放到的最大缩放比例。
    minimum-scale：允许用户缩放到的最小缩放比例。
    user-scaleable：是否允许用户缩放，可以传“yes”或“no”

举一个例子来说明以上的属性，我们来创建这样一个网页：

<!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，那么页面将会宽于设备屏幕宽度，也就是说页面此时可以左右滚动。

我们看到在宽度设置为设备宽度时浏览器宽度显示为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/83097907