关于MVC的信息

1. 什么是viewport

   简单来说，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和咱们手机的宽度不同的，不管你的手机宽度是320px，仍是640px，在手机浏览器内部的宽度，始终会是浏览器自己的viewport。现在的浏览器，都会给本身的自己提供一个viewport的默认值，多是980px，或者是其余值。就以手机来讲吧，目前，新版本的手机浏览器，绝大部分是以980px做为默认的viewport值的。我这里对新版本的不一样平台下的浏览器作了测试，通过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（好比chrome，还有不少国产的像qq，uc）的viewport也是980px了。

2. viewport是用来干什么的

   viewport的默认值，通常来讲是大于手机屏幕的。这样就能够作到当咱们在浏览桌面端网页的时候，可让桌面端端网页正常显示（咱们普通页面设计的时候，通常页面的主区域是以960px来作的，因此980px这个值，能够作到桌面端网页的正常显示）。可是，其实咱们手机的屏幕宽度是没有960px的，所以浏览器会出现横向滚动条。同时，即便是基于980的viewport，咱们在移动端浏览咱们的桌面页面的体验其实也并很差，因此，通常的，咱们会专门给浏览器设计一个移动端的页面。

3. 对viewport的控制

   现在能够绝大部分浏览器里（即主流的安卓浏览器和ios），都支持对viewport的一个控制了。通常的，咱们会这么写。

   viewport默认有6个属性

   • width: 设置viewport的宽度（即以前所说起到的，浏览器的宽度详），这里能够为一个整数，又或者是字符串"width-device"
   • initial-scale: 页面初始的缩放值，为数字，能够是小数
   • minimum-scale: 容许用户的最小缩放值，为数字，能够是小数
   • maximum-scale: 容许用户的最大缩放值，为数字，能够是小数
   • height: 设置viewport的高度（咱们通常而言并不能用到）
   • user-scalable: 是否容许用户进行缩放，'no'为不容许，'yes'为容许

   咱们把这个标签是在head里面，像这样

   <meta name="viewport" content="initial-scale=1">

   这样就能够作到对viewport的控制了

二. 关于咱们的设备

1. 三个须要了解的概念:

   • PPI: 能够理解为屏幕的显示密度
   • DPR: 设备物理像素和逻辑像素的对应关系，即物理像素/逻辑像素
   • Resolution: 就是咱们常说的分辨率

2. 物理像素与逻辑像素

   看了咱们上面内容一的第一点以后，或许有些人会有些疑问，个人安卓手机，或者iphone6plus(目前应该仅限于这一款机型吧)，买回来的是1920x1080的或者其余更高的，比我以前所谓的那个viewport默认的980px要大。

   这样的问题，也就是我以前所说的物理像素与逻辑像素的关系了（即DPR）。以1920x1080为例，1080为物理像素，而咱们在viewport中，获取到的，好比"width-device"，是逻辑像素。因此以前viewport的默认值，所比对的大小，实际上是逻辑像素的大小，而非物理像素的大小。

   以iphone6为例，在不作任何缩放的条件下，iphone6的获取到的'width-device'为375px,为屏幕的逻辑像素。而购买时咱们所知的750px，则为屏幕的物理像素。

3. CSS的问题

   有了上面第二点的一些基础，仍是以iphone6为例，咱们能够知道，其实咱们所写的1px，在iphone6上为2px的物理像素。因此，最后的，给出一个结论。就是咱们写的1px，在移动端，是逻辑像素的1px，而非物理像素的1px。