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的宽度 = 屏幕的逻辑像素宽度

 

 

---

【像素】

 

需知概念：设备独立像素，设备物理像素、css像素

【设备独立像素】

【设备物理像素】

【css像素】

 

CSS像素 =设备独立像素 = 逻辑像素

设备像素 =设备物理像素 = 物理像素

 

相关参考：

什么是viewport，为啥须要viewport

http://www.myexception.cn/mobile/428756.html