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

最新推荐文章于 2021-10-29 23:24:10 发布

原创最新推荐文章于 2021-10-29 23:24:10 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #视口 #像素 #meta

Css 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了移动端网页自适应的问题，解释了布局视口与视觉视口的概念，并通过实例说明了如何利用meta标签来改善移动端网页的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的物理像素：
iPhone5 ：640 * 1136
iPhone6：750 * 1334
iPhone6 Plus：1242 * 2208
       （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)中代标了更多的物理像素，因此变现的状态就是
字体会更大更清晰！