liwusen的博客

我的github主页,https://github.com/forthealllight/blog ,喜欢请star哦

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



                     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)中代标了更多的物理像素,因此变现的状态就是
字体会更大更清晰!

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liwusen/article/details/51541738
文章标签: css 视口 像素 meta
个人分类: Css
上一篇AngularJS中,联合使用ng-repeat和ng-if,可以实现对数据删选显示效果,特别适合于用作表单数据的显示
下一篇AngularJS中的$emit,$broadCast,$on
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭