谈谈个人对移动端视口的理解

1.笔者发现，同样的一个网页，在电脑端显示清楚，但是如果在移动端没有做自适应，有些情况下同一个网页在

移动端字体会变得很模糊。在开发移动端应用的时候，习惯性的我们会加上一下meta标签。

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

      2.为什么需要加上这个标签？

     （1）首先谈谈自己对于Layout viewport(布局视口）的理解

          个人对于布局视口的理解，就是设备当前选择的分辨率。默认情况下，如果同一个电脑端网页要在移动端

显示IOS，Android都将这个视口设为980px，设想一般手机的分辨率是400*600px左右，如果要在该手机上呈现一个98

0px的视口，那么显然这个网页会变得模糊不清。

     （2）什么是Visual viewport(视觉视口）

          视觉视口，个人认为视觉视口与物理像素有关，一般的手机设备物理像素是大大的高于分辨率的，

也就是说视觉视口的大小是远远大于布局视口，下面是一段官方对于视觉视口的解释：

visual viewport（视觉视口）备物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。例如iPhone的物理像素：

（3）两者之间的关系，以及CSS中的像素

在等比例缩放的情况下，CSS中的1px,与固定的逻辑像素dip是相等的，这里的逻辑像素，在任何设备中都

是不变的css的1px/(dip)==缩放比例，而一个dip所对应的物理像素呢。可以这样计算：

dip=(物理像素）/(屏幕当前分辨率）

于是在等比缩放的条件下，CSS中的1px=(物理像素）/(屏幕当前分辨率）;

我们在当前meta标签中，如果设置了width="device-width"就是设置了布局视口等于手机的分辨率，

这样:

(a)在未设置meta标签时：css中的1px=(物理像素）/(980px)

(b)在设置了meta标签后，css中的1px=(物理像素）/(手机分辨率);

一般而言(b)是(a)的两倍甚至以上，同样的1px,(b)中代标了更多的物理像素，因此变现的状态就是

字体会更大更清晰！

来源：CSDN

作者：小小小小小亮

链接：https://blog.csdn.net/liwusen/article/details/51541738

标签