Viewport详解

红太狼 2022-05-09 15:16 162阅读 0赞

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

# Viewport #

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

**我们来分析一下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>

![在这里插入图片描述][70]

这是将viewport的width属性设置为“device-width”的情况，假如我们将宽度设置为600px，那么页面将会宽于设备屏幕宽度，也就是说页面此时可以左右滚动。

我们看到在宽度设置为设备宽度时浏览器宽度显示为375px，然而，事实上iPhone6/7/8的设备宽度应该是750px，那为什么应该与设备一样宽的浏览器宽度却不是750px呢？如果你观察力足够好，相信你已经发现了一些端倪，设备真实宽度正好是浏览器宽度的2倍，而DPR也恰好是2。是的没错，下面给出一个式子：

D P R = 设 备 像 素 设 备 独 立 像 素 DPR =\\frac\{设备像素\}\{设备独立像素\} DPR=设备独立像素设备像素

*  设备像素：物理像素，设备实际拥有的像素。
 *  设备独立像素：逻辑像素，代表应用使用的像素，例如CSS使用的像素。

那么我们在知道DPR之后，我们就可以将CSS像素正确转换为设备像素，从而在不同移动端正常显示图片和样式。

接下来看一下initial-scale这个属性，

i n i t i a l − s c a l e = 设 备 宽 度 网 页 显 示 宽 度 initial-scale=\\frac\{设备宽度\}\{网页显示宽度\} initial−scale=网页显示宽度设备宽度

也就是说当这个值小于1时，网页是被放大的。

[70]: /images/20220506/b8fbb936fb594ebe80be2ea9ef9f7d4c.png