一、今天完成的事情:  学习viewport 

二、明天计划的事情:任务二

三、遇到的问题：暂时没有

四、收获

viewport （视口）就是浏览器显示页面内容的屏幕区域。

layout viewport（布局视口）

一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页

visual viewport（视觉视口）和物理像素

visual viewport（视觉视口）备物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。

例如iPhone的物理像素：

iPhone5 ：640 * 1136

iPhone6：750 * 1334

iPhone6 Plus：1242 * 2208

ideal viewport（理想视口）和 dip （device-independent pixel 设备逻辑像素）

ideal viewport（理想视口）通常是我们说的屏幕分辨率。

dip （设备逻辑像素）跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。

比如MacBook Pro的 Retina （视网膜）屏显示器硬件像素是：2880 * 1800。当你设置屏幕分辨率为 1920 * 1200 的时候，ideal viewport（理想视口）的宽度值是1920像素， 那么 dip 的宽度值就是1920。设备像素比是1.5（2880/1920）。设备的逻辑像素宽度和物理像素宽度（像素分辨率）的关系满足如下公式：

逻辑像素宽度*倍率 = 物理像素宽度

而移动端手机屏幕通常不可以设置分辨率，一般都是设备厂家默认设置的固定值，换句话说 dip 的值就是 ideal viewport（理想视口）（也就是分辨率）的值

CSS像素

CSS像素（px）用于页面布局的单位。样式的像素尺寸（例如 width: 100px）是以CSS像素为单位指定的。CSS像素与 dip 的比例即为网页的缩放比例，如果网页没有缩放，那么一个CSS像素就对应一个 dip（设备逻辑像素） 。

viewport元标签控制布局

<meta  name="viewport" content="width=device-width; initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0; user-scalable=no;">

属性名                取值                           描述

width            正整数 或 device-width       定义layout viewport视口的宽度，单位为像素 

height           正整数 或 device-height       定义layout viewport视口的高度，单位为像素，一般不用 

initial-scale       0.0-10.0                定义初始缩放值 

minimum-scale      0.0-10.0                 定义缩小最小比例，它必须小于或等于maximum-scale设置 

maximum-scale      0.0-10.0                 定义放大最大比例，它必须大于或等于minimum-scale设置 

user-scalable       yes/no                  定义是否允许用户手动缩放页面，yes代表允许,no 代表不允许,默认值yes

在安卓中还支持  target-densitydpi  这个私有属性

target-densitydpi   值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi

因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi这个属性了，所以这个属性要避免进行使用

width

width属性被用来控制layout viewport（布局视口）的宽度，layout viewport（布局视口）宽度默认值是设备厂家指定的。iOS, Android基本都将

这个视口分辨率设置为 980px。我们可以 width=320 这样设为确切的像素数，也可以设为device-width这一特殊值，一般为了自适应布局，普遍的

做法是将width设置为device-width.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

width=device-width 也就是将layout viewport（布局视口）的宽度设置 ideal viewport（理想视口）的宽度。网页缩放比例为100%时，一个CSS像

素就对应一个 dip（设备逻辑像素），而layout viewport（布局视口）的宽度，ideal viewport（理想视口）的宽度（通常说的分辨率），dip 的

宽度值是相等的。

height

与width类似，但实际上却不常用。

initial-scale

initial-scale用于指定页面的初始缩放比例

<meta name="viewport" content="initial-scale=1.5" />

initial-scale=1 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度

initial-scale=1.5 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度的1.5倍

initial-scale=2 表示将layout viewport（布局视口）的宽度设置为 ideal viewport（理想视口）的宽度的2倍

maximum-scale

maximum-scale用于指定用户能够放大的最大比例

<meta name="viewport" content="initial-scale=1,maximum-scale=3" />

假设页面的默认缩放值initial-scale是1，那么用户最终能够将页面放大到这个初始页面大小的3倍

minimum-scale

类似maximum-scale的描述，不过minimum-scale是用来指定页面缩小比例的

user-scalable

user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes，可被缩放，也可以将该值设置为no，表示不允许用户缩放网页

<meta name="viewport" content="user-scalable=no" />

如果width 和 initial-scale=1同时出现

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

width=400表示把当前layout viewport的宽度设为400px，initial-scale=1则表示把当前viewport的宽度设为ideal viewport的宽度，

当遇到这种情况时，浏览器会取它们两个中较大的那个值

当width=400，ideal viewport的宽度为320时，取的是400

当width=400，ideal viewport的宽度为480时，取的是ideal viewport的宽度

(在uc9浏览器中，当initial-scale=1时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度)

要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病

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