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

原创 2016年05月30日 22:57:46



                     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,50,50)(注释:(左上角...

移动web开发视口代码

移动端适配、移动端事件,理想视口

禁止滚动条 取消滚动条的默认样式:html{height:100%;overflow:hidden;} body{height:100%;overflow:hi...

移动端的meta viewport

什么是viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针...

unity3d学习(一)制作第一人称射击-玩家的视口和移动

unity3d学习(一)制作第一人称射击-玩家的视口和移动unity3d学习一制作第一人称射击-玩家的视口和移动 构建简单场景 添加脚本 总结写在前面: - 学习课本:Unity5实战 使用c#和u...

unity3d中使用DoTween来控制2D摄像机视口的移动

using UnityEngine; using System.Collections; public class CameraMove : MonoBehaviour { public ...

OpenGL中glMatrixMode()函数以及视图变换,模型变换,投影变换,视口变换的理解

OpenGL中的视图可以利用照相机来进行比拟。产生目标的场景的变过过程类似于相机拍照。此步骤大概分为三个: 1)把相机固定在三角架上,并让它对准场景(视图变换) 2)对场景安排,使得各个物体在招片中的...

彻底理解窗口,视口,以及SDI各种映射模式

最近在学习《windows程序设计》k
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)