内容简介：你知道HTML
你知道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大小可以通过拖动调整按钮改变。
）。
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值达到设备给我我们推荐的值时，也就是达到了理想的布局视口，这个过程中用多少个物理像素来表示一个逻辑像素也是随之发生变化的。
参考文章
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
