关闭

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

标签: css视口像素meta
980人阅读 评论(0) 收藏 举报
分类:



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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:114450次
    • 积分:1742
    • 等级:
    • 排名:千里之外
    • 原创:64篇
    • 转载:2篇
    • 译文:3篇
    • 评论:17条
    文章分类
    最新评论