结论:方便编程你可笼统地理解viewport为pc端浏览器网页宽度
真机vivo x5pro 调试状况下：（这个屏幕本身固定的设备独立像素为320*617）
当设置如下图元标签时，指定了理想视口宽度，为设备出厂固定的设备独立像素 分辨率320*617
弹出屏幕宽度是320（个人理解单位就是px）
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
（重点：一台移动设备这个值是固定的，可笼统地认为，相当于某台电脑的网页大小也是固定地）
注释掉 弹出屏幕宽度 是视口默认的980*1679（个人理解单位就是px）
强化理解：css样式布局，像素便是相对这个视口，可理解为当前移动设备，网页内容显示区域就是这么宽，
即假如给予固定100px宽度的div，在指定视口为360px下,宽度为屏幕视觉可见区域的三分之一，
不指定视口，对应为默认的980px下，大约相对屏幕视觉可见区域十分之一
<meta charset="utf-8">
<!--<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />-->
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/mediaRem.css"/>
<script type="text/javascript" charset="utf-8">
mui.init();
//console.log(window.devicePixelRatio);
alert(window.devicePixelRatio);
alert(document.documentElement.clientWidth);
//指定过上面视口，即让视口为当前屏幕厂家设置的，设备独立像素dip，vivo x5 pro是360px，
//没有指定那么是默认的980px
</script>
<style>
li{
list-style: none;
border-top: 1px gainsboro solid;
border-right: 1px gainsboro solid;
width: 108px;
height: 108px;
text-align: center;
vertical-align:middle;
display: table-cell;
padding: 0px;
}
</style>重点：确定屏幕宽度，不要混淆了物理分辨率，也不要被其他概念弄混淆，重要的事情说三遍，
- 笼统认为视口宽度=某一台移动设备，网页要编写内容的宽度
- 笼统认为视口宽度=某一台移动设备，网页要编写内容的宽度
- 笼统认为视口宽度=某一台移动设备，网页要编写内容的宽度
详细了解，见下文
名称解释
物理像素（设备分辨率）
物理分辨率：显示屏的最佳分辨率，即屏幕实际存在的像素行数乘以列数的数学表达方式，是显示屏固有的参数，不能调节，其含义是指显示屏最高可显示的像素数。
（我们可以这样理解，如：iPhone5物理分辨率640*1136，那么他实际上横轴有640个点，纵轴有1136个点。）
设备独立像素（逻辑分辨率）（dips）
设备独立像素 device-independent pixels(dips)是由设备自己确定的
iPhone5： 320*568
设备像素比
设备像素比=物理像素/设备独立像素
window.devicePixelRatio = 物理像素/ dips
iPhone5的设备像素比为2；
（以上名称有点混乱：物理像素就是设备分辨率。大家一一对应）
个人意会： 从横向上，手机用2个设备独立像素来模拟1个物理像素
iPhone具体的分辨率
如果我们设计的时候用单位px，可以说是物理分辨率尺寸。
如果我们设计的时候用单位pt，可以说是逻辑分辨率尺寸。
默认视口宽度
大部分手机的视口默认宽度是980px（有个别手机是其他大小）;
获取视口的宽度
方法一： 浏览器中审查元素;
方法二： document.documentElement.clientWidth;
我们不写下面代码的时候，我们可以利用的宽度就980px
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">- 1
手机访问一个网页的时候，内部有一个虚拟容器的概念（就是viewport）。当不写上面代码的时候为980px;
当我们在里面写如下代码的时候,便会产生水平滚动条
<div style="width:1200px;">test</div>- 1
很多浏览器端的网页的宽度设为980px，有一个目的就是当用手机去访问的时候，正好不产生水平滚动条。
很好，皆大欢喜。但是为啥还要后面很多复杂的概念呢？
。。。
因为pc端的屏幕很大，放980px宽度，我们每个字都可以看的很清楚。但是巴掌大的手机同样也放980px宽度的网页内容，上面的图片和字都太小了。
这个980px和上面的逻辑分辨率又是什么关系呢？
个人感觉是把这个980px按比例缩小为了逻辑分辨率。
980px –> 逻辑分辨率
如iPhone5：
如果不希望缩小，我们就可以去设置视口的大小（默认视口为980px）.如下代码：
<meta name="viewport" content="width=480"/>- 1
然后将宽度为1200px的div放进去，会出现水平滚动条。980px的div就也会出现水平滚动条。
（在用浏览器模拟手机端实验的时候，会出现bug.不能展示出上面的效果。）
注意：
因为手机的设备像素比是不同的，所以这个值我们不能设定死。
所以我们需要写代码把他弄活。
<meta name="viewport" content="width=device-width">- 1
这样我们设置的视口大小就等于设备的独立像素。
一般我们都写成
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">- 1
最后：我们网页就把这个视口作为最外面的容器，把body放入这个容器内。并且根据这个外部的容器放大缩小。
内容来自：https://blog.csdn.net/u012258564/article/details/54928765