掌握移动web开发基础系列--viewport-CSDN博客

掌握web开发基础系列--长度单位
 掌握web开发基础系列--物理像素、逻辑像素、css像素

思考一下

你知道HTML <meta> 标签的作用吗？

<meta>标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词等，也可以设置文档中的viewport。

<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。

移动设备屏幕分辨率与其逻辑像素

我们说移动设备的屏幕分辨率，比如iPhone 6是750dp * 1334dp，指的是屏幕横向每行有750个像素点，垂直方向每列有1334个像素点。

我们通过使用 screen.width和 screen.height检测出来的值是 375px * 667px，那么这个值是其逻辑像素。至于移动设备的物理像素到逻辑像素的转换过程，在这里我们不探讨。

viewport

《Configuring the Viewport》这篇文档中详细介绍了什么是viewport及其相关配置，该文档是针对iOS系统的移动设备做出的陈述，其实也适用于Android设备。下面会对该文档做一下简单总结。

1、什么是viewport

pc浏览器viewport：浏览器中网页的可视区域。

viewport在pc上和iOS上有轻微不同。在iOS上面的Safari没有窗口、滚动条以及调整窗口大小的按钮。也就是说pc上的viewport大小可以通过拖动调整按钮改变。

iOS（移动设备）上浏览器viewport：决定网页内容如何布局以及文字如何放置的区域（ 可想而知其相对于pc会有些复杂）。

2、viewport设置

iOS上面的Safari为了让大部分（来自pc端的）网页显示效果更好，做了一些合理的默认设置。比如设置默认的width是980px，当然这个设置不可能会是所有网页都展现的很好，这时就需要自己亲手设置viewport了。width属性被用来控制布局视口（layout viewport）的宽度，布局视口宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口宽度设置为 980px。

移动设备浏览器怎么按照默认viewport展示网页？

把文档中<meta name="viewport">去掉就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body { margin: 0; padding: 0; }
        .box1 { width: 375px; height: 100px; line-height: 100px; text-align: center; background: greenyellow; }
        .box2 { width: 750px; height: 100px; line-height: 100px; text-align: center; background: lightcoral; }
        .box3 { width: 950px; height: 100px; line-height: 100px; text-align: center; background: lightblue; }
        .box4 { width: 980px; height: 100px; line-height: 100px; text-align: center; background: lightslategray; }
    </style>
</head>
<body>
    <div class="box1">375px</div>
    <div class="box2">750px</div>
    <div class="box3">950px</div>
    <div class="box4">980px</div>
</body>
</html>
复制代码

不设置<meta name="viewport">，此时移动设备浏览器将按照默认的width是980px展示网页。

此时的DPR是多少呢？

当前浏览器宽度为980px，那么

DPR = 物理像素 / 逻辑像素 = 750/980 = 0.765。

大家肯定会说图中明明显示了DPR=2.0，对，图中显示的值是当前设备正常显示（就是在我们人眼能看清楚）逻辑像素应该有的值。如果按照DPR=0.765这样展示网页字体太小看的很不清楚，（设备）是不推荐这样做的。

3、使用`<meta>`标签设置viewport

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--下面这个配置很重要-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html, body { margin: 0; padding: 0; }
        .box1 { width: 375px; height: 100px; line-height: 100px; text-align: center; background: greenyellow; }
        .box2 { width: 750px; height: 100px; line-height: 100px; text-align: center; background: lightcoral; }
        .box3 { width: 950px; height: 100px; line-height: 100px; text-align: center; background: lightblue; }
        .box4 { width: 980px; height: 100px; line-height: 100px; text-align: center; background: lightslategray; }
    </style>
</head>
<body>
    <div class="box1">375px</div>
    <div class="box2">750px</div>
    <div class="box3">950px</div>
    <div class="box4">980px</div>
</body>
</html>
复制代码

设置<meta name="viewport" content="width=device-width, initial-scale=1.0">，此时移动设备浏览器将按照的width是device-width展示网页。

因为有宽度大于 375px的元素，所以已经出现横向滚动条。

此时的DPR是多少呢？

当前浏览器宽度为device-width也就是375px，那么

DPR = 物理像素 / 逻辑像素 = 750/375 = 2。

经过设置viewport，网页已经达到了最优展示效果。

如果width等于其他值会是什么样的情况呢？

由于使用Chrome浏览器中的移动设备模拟器测试过程因多次修改viewport相关属性出现了效果不能及时更新的问题，下面我们使用iPhone 6 plus真机上Safari浏览器进行了关于width取不同值情况下页面展示效果的测试。

<!--case 1-->
<meta name="viewport" content="320">
<!--case 2-->
<meta name="viewport" content="375">
<!--case 3-->
<meta name="viewport" content="width=device-width">
<!--case 4 注释下面设置-->
<!--<meta name="viewport" content="width=device-width">-->
复制代码

从上面页面显示效果图可以得到下面结论。

移动设备上，如果页面文档不设置viewport，则当前浏览器窗口宽度按照默认980px进行布局。
移动设备上，如果页面文档设置viewport中的width属性的值，则当前浏览器窗口宽度按照该值进行布局。
移动设备上，页面文档设置了设置viewport中的width属性的值，那么页面中元素的显示会随着该值的增大而变小。

我们想象一下，移动设备的屏幕大小是固定的，我们将viewport的width属性值设大，页面就会展示更多的信息，那么页面中相应的元素显示效果就会变小。那么在这个过程中会有一个最优的阶段，就是width属性值等于device-width的时候，我们很多人此时的视口成为理想视口（ideal viewport）。

4、viewport属性

属性名	取值	描述
width	正整数或者 device-width	定义视口的宽度，单位为像素
height	正整数或者 device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0 - 10.0]	定义初始缩放值
minimum-scale	[0.0 - 10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0 - 10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户收到缩放页面，默认值yes

这里有几种情况需要注意，以iPhone 6 plus为例，其理想视口宽为414px 高为736px：

<meta name="viewport" content="width=375, initial-scale=1.0">
复制代码

上面情况width和initial-scale同时存在，且设定值375小于理想值414，那么会按照理想值414正常布局展示。

<meta name="viewport" content="width=device-width, initial-scale=1.5">
复制代码

上面设置会按照当前device-width即理想值414进行1.5倍放大展示，并出现横向滚动条。

或许还有其他case存在，感兴趣的同学自己去研究啦。

5、布局视口、虚拟视口、理想视口

ppk大神对于移动设备上的viewport有着非常多的研究（第一篇，第二篇，第三篇），有兴趣的同学可以去看一下，本文中有很多数据和观点也是出自那里。ppk认为，移动设备上有三个viewport，即布局视口（layout viewport）、虚拟视口（visual viewport）、理想视口（ideal viewport）。《CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport》这篇文章的第8部分就对ppk的三种viewport做出了介绍。

很多概念谁最先提出或者定义谁就最理解它。后人理解某些概念是或多或少会有些偏差。

只有动手测试一下，才能更加深入的理解相关知识点。

总结

viewport对于移动设备浏览器页面布局来说是非常重要的，它其实就是根据设置width属性的值来控制当前窗口宽度能够存放多少的逻辑（css）像素，width的值越大，存放的逻辑像素越多，那么对应真实的DPR值也就越小，当真实的DPR值达到设备给我我们推荐的值时，也就是达到了理想的布局视口，这个过程中用多少个物理像素来表示一个逻辑像素也是随之发生变化的。