我们通常在写移动端页面时，往往都会在html页面中加入这样一段话

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

可能我们只知道这三个字段的含义（视口宽度等于设备宽度，屏幕缩放为1，禁止用户缩放），但是为什么要这么写，其原理又是什么呢？

我们先看一个简单的demo吧。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Test 02</title>

</head>

<style>

    body{

        margin: 0;

    }

    .pic{

        width: 320px;

        height: 568px;

        background-color: #72DFFF;

        color: white;

        font-size: 60px;

        text-align: center;

        line-height: 568px;

        font-family: cursive;

    }

</style>

<body>

    <div class="pic"> 320*568 </div>

</body>

</html>

该demo展示一个宽度为320px的div，我们在iphone5上面打开看一下。

有没有感觉很诡异？明明iphone5的分辨率是320px*568px(我使用的是谷歌的mobile模拟)，但是只显示了三分之一左右。

在回答此问题之前，我们需要先普及一下一些移动端的概念。

px：逻辑像素

dp：设备像素（物理像素）

dpr：设备像素缩放比

（某一方向上-->计算：dpr = 设备像素/逻辑像素，平面上-->计算：1px = (dpr)² *dp）

ppi：屏幕每英寸的像素数量，即单位英寸内的像素密度（计算：分辨率平方后开跟/屏幕尺寸）

ppi与dpr的关系表

  ldpr mdpr hdpr xhdpr
ppi 120 160 240 320
默认缩放比 0.75 1.0 1.5 2.0

我们得知iphone5的尺寸为4英寸，设备分辨率为1136dp*640dp，由此我们可以得出iphone5的分辨率为320px*568px，如下图（retina为高清）。

该页面展示三分之一的原因是ios中默认的布局viewport是980px，然后根据刚才的计算的iphone5分辨率才会出现此情况。

逻辑像素(css pixels)与设备像素(device pixels)的区别------------

我们姑且认定设备的pixels为正确（标准）的pixels宽度。这些pixels决定了你工作所用的那些设备上正式的分辨率。

如果用户缩放（zoom）了浏览器，当然必须改变计算方式。

现代浏览器上的缩放，是基于“伸展”pixels。结果是，html元素上的宽度并没有因为缩放200%而由128pix变成256px，而是真实的pixels的被计算成了双倍。html元素在形式上依然是128CSS的pixels，即便它占用了256设备的pixels 。

换言之，缩放200%将一个单位的CSS的pixels变成了4倍的设备的pixels那么大，即宽度 * 2、高度 * 2，面积扩大了2 * 2.

下列图片将清楚的解释这个概念。如图1-1.有4个1像素，缩放为100%的html元素，CSS的pixels完整的和设备的pixels重叠

当我们缩小浏览器时，CSS的pixels开始收缩，导致1单位的设备的pixels上重叠了多个CSS的pixels，如图1-2

同理，放大浏览器时，相反的事情发生了，CSS的pixels开始扩大，导致1单位的CSS的pixels上重叠了多个设备的pixels，如图1-3

总体而言，你只需要关注CSS的pixels，这些pixels指定你的样式被如何渲染。

就像刚开始的那个小demo，在pc以及iphone5上展示是两种完全不同的效果。

在这里我普及一个知识点，对于viewport，苹果手机浏览器默认做了两件事——

1.页面渲染在一个980px(IOS)的viewport（安卓viewport宽度不固定）

2.缩放

说的详细一些，viewport，就是手机浏览器把页面放到一个虚拟的窗口中，窗口可大于或小于手机的可视区域，一般会大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移或缩放来看网页的其它部分。

这也就是为什么我们没写viewport，手机会默认将布局宽度置为980px的原因。

为什么要有viewport？
一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。

为什么不使用默认980px的布局viewport
1.宽度不可控，不同设备（安卓）默认值可能不同
2.页面缩小版展示，交互不友好
3.有缩放，缩放后有滚动
4.font-size 可能要设置40px才等于pc上12px，不规范

然后为了在iphone5上正常展示，我们需要写这样一个viewport

<meta name="viewport" content="width=320">

这样效果ok，但是如果我们的设备是iphone6,iphone6s呢？

<meta name="viewport" content="width=375">

显然是不符合规定的，所以我们需要设置

<meta name="viewport" content="width=device-width">

但是每个不同的设备都会有不同的缩放比
window.innerWidth/document.body.clientWidth 为 initial-scale
度量viewport/布局viewport [Layout Viewport（布局视口）]
比如如果要让iphone6展示1000px的页面，只设置"width=device-width"，肯定都会挤在一起。

所以需要让缩放比为1，设置initial-scale=1，所以最终版本是这样

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

最后总结一下移动端中的三个viewport——

1.布局视口

document.body.clientWidth 为手机浏览器viewport宽度（布局viewport），默认980
跟width=device-width相关，其值等于meta标签中的width
initial-scale = 2 ,它会跟着缩小一倍
当你需要使用js而不是媒体查询来编写业务逻辑的时候，这很有帮助
if(document.body.clientWidth >= 400){

　　.class{...}
}
等价于
@media all and (max-width>=400){

　　.class{...}
}

我们用到的vw,vh尺寸单位代表视口的百分比，比如width:50vh,这里的视口就是指布局视口，因为如果是视觉视口，每次用户缩放都会导致元素狂傲发生变化，先不说这个变化带来的大计算量，这种设计对用户来说本身就是毫无意义的。

2.视觉视口

window.innerWidth
屏幕上显示的网站区域尺寸，会受缩放的影响

3.理想视口

screen.width

它是对设备来说最理想的布局视口尺寸。

-----------------------------------------------------------------------------------------------------------------------

在手机上，桌面视口被拆分成两个——布局视口限制你的css布局，视觉视口决定用户能看到什么。

其实这么多的viewport看起来可能会乱一点，但事实并不是这样。最佳实践就是让浏览器直接使用它的理想视口，即把布局视口设置为理想视口，然后使用媒体查询来响应不同的理想视口就OK。

响应式设计的核心——
width和height的媒体查询设置了当前布局视口的宽高。
使用最佳mate标签后，就可以放心的抛开布局视口的宽度，只专注于理想视口
@media all and (max-width:400) {
　　.class {
　　　　...
　　}
}

浅谈移动端三大viewport的更多相关文章

  1. 浅谈移动端适配-rem

    对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...

  2. 浅谈移动端中的视口（viewport）

    在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. ...

  3. 浅谈移动端之touch事件--手指的滑动事件

    今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...

  4. 开园子啦（浅谈移动端以及h5的发展）

    一.前言 一直以来都梦想着写几篇博客,忙于工作一直也没有抽出时间来写一下.看看大熊君.小v君等都在努力写博客,我这个不太善于言表的少年,也是在忍不住了.否则会被人家拉下更远.先简单介绍一下自己,目前我 ...

  5. 浅谈移动端rem的用法

    一 什么是rem? “font size of the root element 这是w3c的定义 也就是说是相对于根节点(html节点)的字体大小的单位. 目前主流的浏览器基本都支持rem这个单位, ...

  6. 浅谈移动端设备标识码：DeviceID、IMEI、IDFA、UDID和UUID

    ---恢复内容开始--- 转:https://www.jianshu.com/p/38f4d1a4763b [心路历程] 最近刚好在思考工作中统计数据所用的标识码产生的数据误差到底有多大,借此机会几番 ...

  7. 浅谈移动端 View 的显示过程

    作者:个推安卓开发工程师 一七 随着科技的发展,各种移动端早已成为人们日常生活中不可或缺的部分,人们使用移动端产品工作.社交.娱乐……移动端界面的流畅性已经成为影响用户体验的重要因素之一.那么你是否思 ...

  8. 浅谈移动端设备标识码：DeviceID、IMEI、IDFA、UDID和UUID -费元星

    在公司做数据分析的时候,发现NA端有很多ID,所有来系统的理解一下,有问题大家多指出   [心路历程] 最近刚好在思考工作中统计数据所用的标识码产生的数据误差到底有多大,借此机会几番搜索资料+请教大神 ...

  9. 干货|浅谈iOS端短视频SDK技术实现

    短视频SDK主要包含"视频录制"和"视频编辑"这两个核心功能. 视频录制包括:视频采集.美颜.滤镜.摄像头切换.视音频采集参数设置等功能: 视频编辑包括:视频导 ...

随机推荐

  1. STM32串口通信UART使用

    STM32串口通信UART使用 uart使用的过程为: 1. 使能GPIO口和UART对应的总线时钟 2. 配置GPIO口的输出模式 3. 配置uart口相关的基本信息 4. 使能uart口的相关的中 ...

  2. lvs+keepalived详解

    常用软件安装及使用目录 资源链接:https://pan.baidu.com/s/15rFjO-EnTOyiTM7YRkbxuA    网盘分享的文件在此 官网:http://www.linuxvir ...

  3. 基础数据类型-list

    序列是python中的基础数据结构,序列里每一个元素都有一个下标,从0开始,依次递增. list,tuple,dictionary是使用最频繁的三类数据结构. (1)序列都有的方法包括:索引,切片,检 ...

  4. mysql 启动报错

    之前用我这个机器做mysql的测试来,今天启动准备搭建一套线上的主从,结果起不来了... 错误日志: ;InnoDB: End of page dump 170807 11:37:02 InnoDB: ...

  5. Jamie and Alarm Snooze

    Description Jamie loves sleeping. One day, he decides that he needs to wake up at exactly hh: mm. Ho ...

  6. 给你的WP应用加上帮助文档

    背景 这算是Windows Phone编程回顾续篇, 接着给大家聊WP开发经验. 在开发了数个WP应用并发布后, 陆续收到很多反馈邮件, 其中接近一半的邮件是在问"某某功能有没有?" ...

  7. 安装Tensorflow过程pip安装报错：is not a supported wheel on this platform

    安装Tensorflow过程pip安装报错:is not a supported wheel on this platform 通过pip安装wheel镜像时,安装指令为: pip install - ...

  8. Android中的回调Callback

    回调就是外部设置一个方法给一个对象, 这个对象可以执行外部设置的方法, 通常这个方法是定义在接口中的抽象方法, 外部设置的时候直接设置这个接口对象即可. 例如给安卓添加按钮点击事件, 我们创建了OnC ...

  9. css那些事儿3 列表与浮动

    一  列表 列表默认为行内块元素,具有宽高,当一个非块元素是无法应用宽高的,比如a 1 有序列表 有ol li组成,其中li为列表项,列表的ol子元素务必为li元素标签,li子内容支持列表任意嵌套,有 ...

  10. Filezilla 绿色版 禁止升级 能用。

    FileZilla还是挺好用的,但是如果钟情于 绿色版的话,肯定首选是 免安装绿色版.但是呢,能找到的所谓的免升级 绿色版,都不能用.只要是打开软件了,就会在你还没有设置更新之前,就已经升级号了.并且 ...