什么是视口？

视口(Viewport)是移动Web开发中一个非常重要的概念，简单来说就是浏览器显示页面内容的屏幕区域。最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。

为什么要研究视口？

如果把一个PC端的网站放到手机端，整体会被缩小，为什么？

答：把PC端的网站放到手机端，分两步：

（1）把电脑端的网站放到虚拟容器中，这个虚拟容器的宽度是980px，这个980是人为规定的，手机在出厂时就设置好了。如果电脑端的网站整体的宽度也是980px，就会正好放到这个虚拟容器。如果电脑端的网站宽度大于980px，你的网站在这个虚拟容器中就会产生一个水平滚动条。如果电脑端的网站宽度小于980px，这个虚拟容器也可以放下。

（2）第二步，就是把这个虚拟容器放到手机里如果手机的宽度也是980，正好把这个虚拟容器放下。不幸的是，手机的宽度在出厂时，也是设置死的。如：iphone6/7/8宽度是375 如果iphone5宽度是320，如iphone6/7/8plus它的宽度是414.... 安卓手机在出厂时，也规定死了一个宽度，你自己可以去查一下，你手机的宽度。

    你要把一个980的虚拟容器放到一个300 400 500左右的手机里，会怎么样？
   
   答：此时，这个虚拟容器就会被压缩，页面上的每一个盒子也会被压缩。这并不是我们想看到的。

基本概念

视口基本概念

视口：上面的虚拟容器就叫视口。视口不受CSS影响，它不属于HTML结构，它的宽高由浏览器窗口决定。

为什么是980？很早之前，电脑的分辨率比较低，写一个电脑端的网站都是980px。为了让980px的网站可以在手机完美显示出来，人为地把这个虚拟容器的宽度定了980px。

iphone6/7/8宽度是375 iphone5宽度是320 iphone6/7/8plus它的宽度是414

上面的320px 375px 414px，指的是手机的宽度（设备独立像素，和我们手机的分辨率不是一回事）

在真实开发中，通常会以iphone6作为标准。

因此，在开发时，我们就以手机宽度为主。

两种像素的基本概念

物理像素：指的是手机或电脑屏上的发光点。叫物理分辨率，也叫物理像素。如：iphone6的分辨率1334*750 在水平方向上有750个发光点，在垂直方向上有1334个发光点。

在开发时，不关心物理像素

逻辑像素：在写CSS代码时，写的像素叫逻辑像素，如：.box{width:100px,height:100px;}

在电脑端：1个逻辑像素等于 1个物理像素但是在手机端就不一样了。

写一个盒子： 200*200盒子。在PC端：逻辑像素和物理像素一一对应在iphone6/7/8plus上：1)盒子先放到虚拟容器（980px）中然后压缩放到414的手机中在iphone6/7/8上：1)盒子先放到虚拟容器（980px）中然后压缩放到375的手机中在iphone5上：1)盒子先放到虚拟容器（980px）中然后压缩放到320的手机中

同一个盒子在不同的手机中，大小是不一样的。

同一个盒子在不同的手机中，显示的大小，取决于手机的分辨率，正确吗？答：不正确取决于手机的宽度，这个宽度叫设备独立像素。

以iphone6为例：分辨率是：1334750 在水平方向上有750个发光点，在垂直方向上有1334个发光点。设备独立像素：375667

就是水平方向来说：
    分辨率：750   有750个发光点
    设备独立像素：375    

像素是一块一块：1*1的像素块

结论：在iphone6上，1设备独立像素块，最终映射到手机的上，可以映射4个发光点。

视口设置

那么如何不让盒子压缩呢?

答：为了不让盒子放到手里被压缩，可以设置这个虚拟容器的宽度。

如： 200*200盒子。人为设置虚拟容器是的宽度是414。

1. 200*200的盒子放到414的盒子，肯定可以放下

2. 414的虚拟容器放到414的手机中就不会压缩。

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

作用：让当前的viewport的宽度等于设备的宽度，同时不允许用户手动缩放

`` 下面是每个属性的详细说明：

属性名	取值	描述
width	正整数或device-width	定义视口的宽度，单位为像素
height	正整数或device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义放大最大比例，它必须小于或等于maximum-scale设置
user-scalable	yes / no	定义是否允许用户手动缩放页面，默认值 yes

结论：如果不想让盒子被压缩，你需要设置虚拟容器的大小。如果设置成和手机的宽度一样的，这样，这个盒子在所有的手机都不会压缩了。

最小缩放和最大缩放

initial-scale=1,maximum-scale=1”

如果允许缩放，那用户可以缩放到什么程度呢？

在手机上是5个因子，换句话说就是20% － 500%。

但是安卓-webkit-不大一样,不管有没有meta指令，它的缩放范围都是4个因子（25%－400%）;

我们可以通过:<meta name="viewport" content="user-scable=no"/>来禁止用户缩放

结论

最终的结论：只要我们去写手机端的页面，必须要设置视口大小。

关于视口的问题