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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

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

移动端视口

名称解释物理像素(设备分辨率) 物理分辨率:显示屏的最佳分辨率,即屏幕实际存在的像素行数乘以列数的数学表达方式,是显示屏固有的参数,不能调节,其含义是指显示屏最高可显示的像素数。 (我们可以这样理...

移动端的meta viewport

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

wordpress修改固定链接后打不开文章链接的处理

最近接触wordpress开源博客系统,下载的是最新版3.3中文版。在自己的本地电脑上apache开了一个虚拟主机,开始安装。 随意把玩之后,发现一个功能:设置>>固定连接 很有趣,可以修改为比较漂...

React中的高阶组件(HOC)

简要介绍:React中不会用到组件的继承,作者选择用组合来代替继承,但是存在一种情况,就是两种组件方法类似,如果能有一种“类继承”的方式,在同一个函数中可以生产这两种组件,那么就可以大量的减少代码的冗...
  • liwusen
  • liwusen
  • 2017年07月22日 16:46
  • 308

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

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

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

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

HTML5 移动端 视口的相关问题

移动端 视口的相关问题

移动web(二)viewport视口、像素密度

viewport视口、像素密度

手机移动端的一些布局,视口知识的分享

手机视口         使用js来检测屏幕视口的宽度                document.documentElement.clientWidth;                ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:谈谈个人对移动端视口的理解
举报原因:
原因补充:

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