viewport、像素、分辨率

移动端web所遇屏幕适配问题：

解决：<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

//这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致，可以让网页的宽度自动适应手机屏幕的宽度，利用浏览器自身缩放完成适配

作用：该meta标签的作用是让当前viewport(设备独立像素layout viewport)的宽度等于设备的宽度(设备物理像素)，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport(浏览器默认的layout viewport)，也就是说会出现横向滚动条。

详解如下：

【viewport】

需知概念：视觉视窗、布局视窗、理想视窗

【visual viewport】(视觉视窗) ，代表浏览器可视区域的大小，宽度可以通过window.innerWidth 来获取

【layout viewport】(布局视窗) ，一个较宽的值，宽度可以通过 document.documentElement.clientWidth 来获取

【ideal viewport】(理想视窗)，不需要用户缩放和横向滚动条就能正常的查看网站的所有内容的宽度， ideal viewport的宽度 = 屏幕的逻辑像素宽度