viewport大白话

以下所有内容均是我自己理解的，可能有误，懂得大佬希望指点一下我。。

首先，写一个简单的页面。里面只有1个200*200的div

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <style>

            div {

                background-color: red;

                width: 200px;

                height: 200px;

            }

        </style>

    </head>

    <body>

        <div>

            123

        </div>

    </body>

</html>

　把他们在电脑上和在iphone8上看，会发现，同样是200px的css像素单位，竟然不一样大？？？原来css像素单位其实是个抽象的概念，真的显示靠的是终端设备的物理像素。

这里先引入一个概念叫dpr，dpr=物理像素／设备无关像素，设备无关像素对于web而言就是css像素。

如果说本来屏幕够大的电脑，1px的css像素就对应了1px的物理像素。但是对于移动端设备就不行啊，屏幕太小了，你稍微设一个div大点，一般的手机估计就要启动移动条了。

那怎么办？为了让我们的移动端手机把这么大的电面页面放进去，这里就要用到上面说的dpr了。比如说dpr为2的iphone 6，1px的css 就等于 2px的物理像素。

记住，物理像素可以被认为是物理元件，就当它是很小很小的显示屏。手机上的1px物理像素肯定做的比电脑上要小点。我们在为页面写上css以后，把他们放在电脑上和手机上看，差别就

出来了。电脑上一比一的显示，手机上，如果是dpr等于2的话，1px的css长度，就等于0.5倍的css长度。所以看上去就小了！！！

那问题就来了！！！这么小，我看不清楚啊！！！ok，那既然1px的css长度看上去好像缩小了一半，那想变大点的话，你就设置2px的css，这样看上去就像电脑上的1px一样了。字体也是一样的道理。

另外还有一种解决办法，用meta的viewport，我们经常会看到head里加这么一段代码：

这样写完之后，大小竟然和电脑上显示的完全一致？？？？什么鬼呢？？？我感觉了一下，就像我们按住ctr和+的组合键，放大着看了一样。

其实这个scale = 1/dpr。物理像素是物理元件，是不可能变化了，那只能是css像素缩放了，反正他只是个抽象的概念嘛！！！

好！其实内容已经介绍完了，我们拿ip6为例，本来dpr=2的，scale = 1/dpr = 1/2 = 0.5的，但是你强行写成了1，这样就相当于你把原本200px的css像素，放大成了400px的css像素。这样不就电脑和

手机上显示一样了吗！！！

如果你在别的地方，看乱七八糟一大堆介绍viewport的概念的，什么理想的viewport，布局的viewport，视觉的viewport这种觉得很烦的话，你就记住物理像素是物理元件，改变不了的！！想缩放，就只能

去改变css大小！！！，我们在meta里设置viewport就是缩放css大小！！！

巴特西

viewport大白话

最新文章

热门文章