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