视口
<meta name="viewport" content="width=device-width"/>我们一直在使用这行代码，但是这样写有什么用 ？ 加了这个和不加这个到底有什么区别？
要解释这个问题，我们首先要了解一个概念 - 视口
在解释视口之前，我们先回顾一下CSS的基础：
css中，在没有声明任何宽度时，每个块级元素的默认宽度都是100% 。那这个100% 是相对于什么的100% 呢？ 对了，是它父元素的100% 。 每一个css百分比都是根据它的父元素的宽度来进行计算的，所以宽度为父元素 宽度的100% ，本质是：
body,html{
//没有制定宽度，默认100%}
div.aside{
width:20%;}这里，div.aside占用了它的父元素 body 宽度的100％，但我们没有给body 定义宽度，因此，它占用了它的父元素，也就是html 宽度的100% 。但，我们同样也没有给它定义宽度。因此，它占用的是它的父元素宽度的100% ;
那html 的父元素是谁呢 ？
这就是要说的 视口了。
在CSS文档中，它叫做 初始包含块。
这是百分比计算的根源，它给css布局限制了最大宽度。
在pc 浏览器中，视口的宽度 和浏览器窗口的宽度是一致的（先不管margin 和padding）,html ,body 元素的宽度都和浏览器窗口的宽度一致。
布局视口layout viewport
小屏幕的移动端设备，主要是手机和部分平板（屏幕特别巨大的除外＝ ＝ ），如果让视口的宽度和浏览器宽度 保持一致的话，会导致一个结果——-页面很丑。
手机，平板，浏览器的宽度一般在240-640像素之间，而大…大多数给pc设计的宽度至少为800，一般是960，或者1080。因此，如果用手机去看刚才的那个页面，宽度20%的aside将会非常窄。
一个为桌面设计的网站 在780～ 1260px 的视口中应该会显示的很好，20% 宽度的元素也会大致像设计师希望的那样。
但是，如果移动端浏览器遇到了没有为移动端做优化的网站，它会尽可能的缩小网站让用户看到网站的全貌。所以就显得很挤，字体很小，阅读性很差。
这样用户就只有通过放大，去看想看的信息。
在手机上，视口与移动端浏览器屏幕宽度不再关联，而是完全独立的了。
这个视口，叫布局视口，css布局会根据它来计算，并被它约束。
视觉视口visual viewport
字面意思，它是用户正在看到的网站的区域。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
一般情况下，视觉视口对于开发人员来说并不是那么重要，到那时如果有需要看到用户正在看什么区域的需求，可以用js来获取。
理想视口
首先来解释一下这个概念
默认情况下，移动设备的布局宽度为768～1024像素，虽然这能让桌面网站不被压扁，但这并不是理想情况，尤其是对于小屏幕的使用者，因为在狭小的屏幕上，更适合狭小的网站。
简单的说，就是，布局视口的默认宽度并不是一个理想的宽度。
这就是 苹果 和其他效仿苹果的 浏览器厂商 引进理想视口的原因。
理想视口，对设备来讲，是最理想的视口尺寸。
显示在理想视口中的网站拥有最理想的宽度，不需要缩放。
但，只有当网站是手机（或者平板）的时候，才应该使用理想视口。
所以，代码<meta name="viewport" content="width=device-width"/>就是告诉浏览器，我要使用理想视口了。
让布局视口的宽度和理想视口的宽度一样。
哦，对了，只有我们人为添加这段代码，理想视口才会生效，否则，布局视口将会维持默认宽度。
缩放
首先，什么是缩放…
从技术上讲，缩放就是放大或者缩小css像素的过程。
典型的例子就是我在手机上浏览pc端的网站，放大一点，好看清字。
但是，这个缩放会影响页面上的所有元素。
比如，宽度为200px的元素占用了200个css像素，由于这些像素被放大了，这些像素就跨越了更多的物理像素，缩小则相反。css像素的尺寸缩小了，跨越的设备像素也就少了。
所以，缩放会影响视觉视口的尺寸。
放大会使视觉视口变得更小，我们看到的内容就越少，因为屏幕上显示的css像素更少了。
缩小则会使视觉视口变的更大，使我们看到更多的部分。因为屏幕上css像素更多了。
所以，缩放程度和视觉视口的大小是逆相关的：缩放程度越大，视觉视口越小。
一个重大区别
在手机上，布局视口不会被缩放。但是在pc上会，因为它的布局视口和视觉视口大小是一样的，不可能改变一个的同时，另一个不会变。
要注意的是：移动端的缩放虽然不会导致css布局被重新计算，但是频繁的操作会给cpu比较大的负担，耗电快，因此不重新布局对性能有很大好处。
最小缩放 和最大缩放
initial-scale=1,maximum-scale=1”
如果允许缩放，那用户可以缩放到什么程度呢 ？
在手机上是5个因子， 换句话说就是20% － 500%。
但是安卓-webkit-不大一样,不管有没有meta指令，它的缩放范围都是4个因子（25%－400%）;
我们可以通过:<meta name="viewport" content="user-scable=no"/>来禁止用户缩放。
分辨率
分辨率有两个含义。
- 设备每英寸的点的个数。
- CSS 和 JavaScript 中也有分辨率的概念，不过他们并不是一回事。
物理分辨率dpi
所有的屏幕都有物理分辨率，衡量单位为DPI ,（dots per inch）.DPI 越大，画面越清晰。
另外要注意的一点，web开发者不可能知道物理分辨率，因为没法获取这个信息。有些手机通过screen.width暴露设备像素个数，但这在不同浏览器之间是不可靠的。无论如何JavaScript 都无法获取设备的物理尺寸。
设备像素比 dpr
JavaScript 中，有个属性，window.devicePixelRatio
CSS也有device-pixel-ratio 和分辨率的媒体查询，但是它们都是和物理分辨率无关的。
取而代之的是，他们提供了设备像素个数和理想视口的比，成为设备像素比，device pixel ratio,简称DPR。
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips。
dips:device-independent pixels
设备独立像素，就是独立于设备之外的像素，也就是css像素。
例子
5s的物理像素为640px, CSS像素为320px,那 pdr = 640/320 = 2.
DPR不一定是整数,比如BlackBerry Z10 的宽度是768px 物理像素；CSS像素为342px,因此，它的dpr 大约为 2.25.
meta视口
meta 视口标签存在的目的主要是：让布局视口的尺寸和理想视口的尺寸匹配。
Apple 发明了这个标签，其他的厂商复制了它的大部分内容。
meta 标签应该被放在中，并按以下格式书写：
<meta name="viewport" content = "name= value,name = value">
每一个名/值 都是一个给浏览器的指令，以逗号分隔，常用的有5个：
- width设置布局视口的宽度，为一个正整数
- initial-scale设置页面的初始缩放程度 和布局视口的宽
- minimum-scale允许用户的最小缩放程度，为一个数字，可以带小数
- maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
- user-scalable是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
完美的meta 视口
在safari中，当设置initial-scale= 1 时，理想视口的尺寸会随着屏幕的旋转改变。在竖屏时，布局视口的宽度是320px ,横屏下，是480px 或者568px.
但在ie10中却有完全相反的问题：
initial-scale = 1 时，在横屏模式下宽度也保持为320px ,但width = device-width 时，它会从320px变为480px.
所以为了在所有浏览器上解决类似的问题，我们需要如下写法：
<meta name="viewport" content = "name= value,initial-scale=1 ">
来源：CSDN
作者：picoasis
链接：https://blog.csdn.net/lamanchas/article/details/78473689