viewport详解

来源：互联网发布：tcp ip协议四层网络编辑：程序博客网时间：2024/06/05 09:13

在移动开发初期，我们可能会有以下的困惑

在开发过程中，为何Iphone5的分辨率是 320px * 568px? 但对外宣称的分辨率却是 640 * 1136? 两者之间的关系是什么？它们之间是如何进行转化的？ viewport是啥？有什么作用？

接下来就来围绕着这个几个问题进行解释

一、首先是一些基本概念的解释

1. px:

css pixels 逻辑像素，浏览器使用的抽象单位。
即是不同的设备 1px所代表的大小不一样。即是相当于 iphone5中
320px * 568px 所表示的。

2. dp, pt

device independent pixels 设备无关像素。
这里 iphone5对外宣称的分辨率为 640 * 1136即是设备无关像素。这里可以理解成屏幕宽度被分成了640等分，高度被分成1136等分。

3. dpr

devicePixelRatio, 设备像素缩放比。
即是设备无关像素与逻辑像素(css像素)的比例，通俗的讲就是在css中 1px 代表了多少设备像素的问题。

4.其运算关系为：

1 px = (dpr)² * 1 dp(平面上)，即是维度上(宽或高) 1 px = dpr * dp ;
表示
1 px 代表的宽度(高度)，为 dpr个设备无关像素。

因为 iphone5的dpr为2，所以其一个逻辑像素(1px)等于两个物理像素的长度。

二、那么为何iphone5的dpr为2呢？

下面先看两个概念。注意下面说的像素是设备无关像素,就是 1136 * 640。

1. DPI

打印纸每英寸可以喷的墨汁点(印刷行业)。

2. PPI

屏幕每英寸的像素数量，即单位英寸的像素密度。

DPI 和 PPI 表示的是同一个意思，即是单位英寸的像素数量。

3. 其计算公式为(以iphone5为例)

ppi = √(1136 ² + 640²) / 4 = 326ppi;

因为ppi 代表每英寸的像素数，所以ppi越大，代表屏幕每英寸的像素数越多，也就是显示的更加清晰。

而ppi与dpr有一定的相关性，即ppi越大，dpr也相应的较大，其对照表如下。

ldpi mdpi xdpi hdpi ppi 120 160 240 默认缩放比(dpr) 0.75 1.0 1.5

所以我们可以根据算出的ppi对照表格得到 dpr从而，得到 1px代表的设备像素。

综上，我们可以按一下方式算出iphone5的逻辑分辨率

(1)、iphone5设备分辨率 1136dp * 640dp
(2)、ppi = √(1136 ² + 640²) / 4 = 326ppi;
(3)、对照表格 dpr = 2
(4)、得到逻辑像素 (1136 / 2)px * (640 / 2) = 568px * 320px

由上，我们可以知道，320px * 568px 代表的iphone5的逻辑像素，就是书写css是的像素，而对外宣称的640 * 1136指的是设备像素，是具体的物理像素，他们之间的转化关系是通过dpr。下面我通过一个例子来说明。

<!DOCTYPE html><html><head> <title></title> <style type="text/css">     .page{       width: 320px;       background: #228822;       height: 568px;       color:#fff;       line-height: 568px;       text-align: center;       font-size: 20px;     } </style></head><body>  <div class="page">         320px * 568px  </div></body></html>

上面写了个div使其宽度为 360px,理论上刚好应该可以充满 iphone5模拟器的宽度，但是实际上呢？下面看看其运行结果图

这里写图片描述

咦！结果怎么和我们想的不一样，不但没充满宽度，还多了一大半的空白区域，这是为何呢？

带着疑问，我们先来看看下图
这里写图片描述

what! 文档的可现实区域为 980px??????? 说好的 320px呢？我们把宽度改成980px看看

.page{  width: 980px;  background: #228822;  height: 568px;  color:#fff;  line-height: 568px;  text-align: center;  font-size: 20px;}

结果如下

这里写图片描述

wk竟然满屏了。

原来，为了能在移动端可以正常的访问pc端的浏览器，移动浏览器开发商默认了iphone浏览器的文档宽度为980px, 这样访问pc网页的时候，才不会使网页结构崩溃，想一想，假设直接用 320px,那么当我们访问pc端网页，由于pc一般是以1024px作为总宽度的，如果一行有两个元素的宽度之和大于 320px,那么在移动端可能发生一个元素被挤到另外一行的情况。所以在iphone移动端访问时，浏览器会先把文档渲染到980px宽度里的文档里，然后在缩放到手机视口宽度的大小，所以才会出现以上左边有留白的情况。

上面渲染为980px的窗口，就是所谓的layout viewport(布局窗口),而手机视口窗口，则称为visual viewport(视口窗口)，

要是我们非要用使用 320px呢？也是可以的，这里就要用到viewport了，先看如下代码

<!DOCTYPE html><html><head> <title></title> <meta name="viewport" content="width=320"/> <style type="text/css">     .page{       width: 320px;       background: #228822;       height: 568px;       color:#fff;       line-height: 568px;       text-align: center;       font-size: 20px;     } </style></head><body>  <div class="page">         320px * 568px  </div></body></html>

这里加了一句代码

 <meta name="viewport" content="width=320"/>

其结果为

这里写图片描述
这句代码的作用是使，布局窗口的宽度等于320px,所以结果才会占满所有的宽度。这里有一种更加通用的写法

  <meta name="viewport" content="width=device-width"/>

这样就不用为每个型号的手机指定布局宽度了，另外也可以直接设置如下

   <meta name="viewport" content="initial-scale = 1"/>

其结果也是一样的，布局宽度等于视口宽度。

常见的viewport设置如下

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

其各个属性的作用如下图所示

这里写图片描述

由此可见，viewport的主要作用是是布局宽度等于视口的宽度，从而便于在移动端开放，增加了网页的可读性。

阅读全文

0 0

viewport详解

在移动开发初期，我们可能会有以下的困惑

在开发过程中，为何Iphone5的分辨率是 320px * 568px? 但对外宣称的分辨率却是 640 * 1136? 两者之间的关系是什么？它们之间是如何进行转化的？ viewport是啥？有什么作用？

接下来就来围绕着这个几个问题进行解释

一、首先是一些基本概念的解释

1. px:

2. dp, pt

3. dpr

4.其运算关系为：

因为 iphone5的dpr为2， 所以其一个逻辑像素(1px)等于两个物理像素的长度。

二、那么为何iphone5的dpr为2呢？

1. DPI

2. PPI

DPI 和 PPI 表示的是同一个意思，即是单位英寸的像素数量。

3. 其计算公式为(以iphone5为例)

因为ppi 代表每英寸的像素数，所以ppi越大，代表屏幕每英寸的像素数越多，也就是显示的更加清晰。

而ppi与dpr有一定的相关性，即ppi越大，dpr也相应的较大，其对照表如下。

所以我们可以根据算出的ppi对照表格得到 dpr从而，得到 1px代表的设备像素。

综上，我们可以按一下方式算出iphone5的逻辑分辨率

由上，我们可以知道，320px * 568px 代表的iphone5的逻辑像素，就是书写css是的像素，而对外宣称的640 * 1136指的是设备像素，是具体的物理像素，他们之间的转化关系是通过dpr。下面我通过一个例子来说明。

上面写了个div使其宽度为 360px,理论上刚好应该可以充满 iphone5模拟器的宽度，但是实际上呢？ 下面看看其运行结果图

咦 ！结果怎么和我们想的不一样，不但没充满宽度，还多了一大半的空白区域，这是为何呢？

what! 文档的可现实区域为 980px??????? 说好的 320px呢？我们把宽度改成980px看看

结果如下

wk竟然满屏了。

上面渲染为980px的窗口，就是所谓的layout viewport(布局窗口),而手机视口窗口，则称为visual viewport(视口窗口)，

要是我们非要用使用 320px呢？ 也是可以的，这里就要用到viewport了，先看如下代码

其结果为

常见的viewport设置如下

其各个属性的作用如下图所示

由此可见，viewport的主要作用是是布局宽度等于视口的宽度，从而便于在移动端开放，增加了网页的可读性。

因为 iphone5的dpr为2，所以其一个逻辑像素(1px)等于两个物理像素的长度。

上面写了个div使其宽度为 360px,理论上刚好应该可以充满 iphone5模拟器的宽度，但是实际上呢？下面看看其运行结果图

咦！结果怎么和我们想的不一样，不但没充满宽度，还多了一大半的空白区域，这是为何呢？

要是我们非要用使用 320px呢？也是可以的，这里就要用到viewport了，先看如下代码