CSS笔记（关于viewport）
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0">其中：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度。initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例maxmum-scale：最大允许的放大比例minmum-scale：最小允许的缩小比例user-scalable：是否允许用户缩放
在重构移动端页面的时候，在头部添加上<meta name="viewport" content="width=device-width,initial-scale=1.0">，就算给元素赋予统一固定的像素值，但是奇怪的是在不同的手机里看起来都差不多大小，不需要另外去适配，这到底是为什么呢？
在此之前，需要先熟悉几个概念：
- 屏幕尺寸：指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
- 屏幕分辨率：指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960*1080。（这里的1像素值得是物理设备的1个像素点）
- 屏幕像素密度（pixels per inch，缩写：ppi）：屏幕上每英寸可以显示的像素点的数量，单位是
ppi，计算方式（计算1080*1920分辨率的5寸手机）：
- 1、勾股定理算出对角线的分辨率：
√(1920²+1080²)≈2203px - 2、再用对角线的分辨率除以屏幕尺寸：
2203/5≈440ppi
- 1、勾股定理算出对角线的分辨率：
- 打印点密度（dots per inch，缩写：dpi）：最初用于衡量打印物上每英寸的点数密度，就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时，就称之为ppi。ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi。
- 密度独立像素（density independent pixels，缩写：dp，dip）：可以想象成是一个物理像素（px）的中介转化物理尺寸，使同样的设置在不同手机上显示的效果看起来是一样的，比方说：以打印点密度为160dpi为基准，1dp=1px。若密度是320dpi，则1dp=2px，以此类推。而Android和IOS都会通过转换系数让控件适应屏幕的尺寸，举例子：一个按钮给了44*44
dp的大小，在160dpi密度的时候，按钮就是44*44px大小；在320dpi密度的时候，按钮就是88*88px的大小。不需要我们去书写多套尺寸。（即我们设定的css中px代表的并不是真正意义上的物理像素px，而是密度独立像素dp）
上述的dp与px数值对应的基准由屏幕像素密度而定（屏幕像素密度与打印点密度概念相同）
屏幕像素密度(dpi) |
dp与px数值对应关系 |
Google官方指定名称 |
|---|---|---|
~160dpi |
1dp = 1px |
~120dpi：idpi；120 dpi~160dpi：mdpi |
160dpi~240dpi |
1dp = 1.5px |
hdpi |
240dpi~320dpi |
1dp = 2px |
xhdpi |
320dpi~480dpi |
1dp = 3px |
xxhdpi |
480dpi~640dpi |
1dp = 4px |
xxxhdpi |
Viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，窗口可大于或小于手机的可视区域，一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分。
其中：
- layout viewport：手机默认的
viewport称为：layout viewport，其宽度可用document.documentElement.clientWidth获取 - visual viewport：浏览器可视区域称为：visual viewport，其宽度可用
window.innerWidth获取，部分如UC8浏览器不支持该方法获取 - ideal viewport：不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；其次显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示大小都是差不多的。这样的viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport。
那么如何得到ideal viewport呢？可以在头部meta标签中设置viewport中的width=device-width，如：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例maximum-scale：允许用户缩放到的最大比例minimum-scale：允许用户缩放到的最小比例user-scalable：用户是否可以手动缩放
假如没有设置这样的viewport，那么网页重构时，移动端就会设置默认的viewport，如iPhone4S如果不设置viewport，他就会默认是980px（注意这里讲的是layout viewport，而不是屏幕分辨率的640px），那么设置一个元素为100px*100px，看起来就是屏幕的100/980。各手机默认的layout viewport，如图
但设置viewport属性width=device-width，他就会是320px，就像把屏幕分成320份，看起来就是屏幕的100/320。
那么设置了viewport，width=device-width，弹出来的是设置好的宽度，375px、360px、320px。为什么是这个大小？这就要用到上面讲的知识点了，举例子：
iPhone6的屏幕分辨率是1334*750px，ppi是326，所以系数是2x。那device-width就等于750/2=375px。
