一、viewport宽度

起源：PC端的网站要显示在移动端有什么问题？

· 如果把移动端的可是区域设置到（320-768）的话，大部分网站都会因为太窄而显示错乱

· 所以浏览器默认把viewport【这个viewport指的是layout viewport】设置为一个较宽的值980px或者1024px，至少保证PC网站在移动端上可以显示，只是超出部分出行横向滚动。

二、概念

1、css像素

· html页面中单位是px，在pc中往往1 css px=1物理像素

· css像素是相对值，在不同设备中1px对应不同的设备像素；iphone3的分辨率是320*480即1px=1物理像素；iphone4分辨率640*960但是屏幕尺寸没变，意味着同一块区域像素多了1倍，即1 css px=2物理像素。

2、物理像素

·  表示每英寸所拥有的像素数目，数值越高，代表屏幕能够以更高的密度来显示图像

3、分辨率

· 显示器能够显示的像素多少，显示器可以显示的像素越多，画面就越精细，同样的屏幕区域能显示的信息就越多。

4、devicePixelRatio

· window.evicePixelRatio=物理像素/css像素。在iphone4中devicePixelRatio=2也就是1 css像素=2个物理像素。

· devicePixelRatio在不同浏览器中存在一些兼容性问题，并不是完全可靠的。

5、布局视口layout viewport

· 移动设备的默认viewport,css布局是以layout viewpot来作为参考系计算的。

· document.documentElement.clientWidth获取

· 该尺寸可动态设置。

6、展示视口visual viewport

· 代表浏览器可视区域的尺寸。当用户放大浏览器时这个尺寸就会变小

· window.innerWidth获取

7、ideal viewport

· 屏幕尺寸 设备屏幕的尺寸 单位是物理像素

· screen.width获取 屏幕尺寸是不变的

· 在该viewport中用户不需要缩放和横向滚动就可以正常查看网站的所有内容

· 设置移动端网站一般以这个viewport为准，ideal viewport的宽度等于设备屏幕宽度，使得无论在什么分辨率下，那些针对ideal viewport设计的网站都可以完美的呈现给用户。

三、屏幕适配

为了能在移动端正常显示PC端的页面，把viewport设置为一个较宽的值，这个viewport是layout viewport。

因为layout viewport的宽度大于浏览器可视区域的宽度，所以需要一个viewport来代表浏览器可视区域的大小，这就是visual viewport。

许多网站为移动设备单独设计，所以需要一个能完美适配移动设备的viewport，这个就是ideal viewport。完美适配就是永恒不需要缩放，不需要横向滚动条就能正常查看网站的所有内容。

ideal viewport没有固定尺寸，不同设备拥有不同的ideal viewport。所有的iphone的ideal viewport都是320px，无论屏幕是320还是640,安卓就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备ideal viewport的宽度都为多少，可以到//viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。

把移动设备上的viewport分为layout viewport  、 visual viewport   和 ideal viewport  三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了。让布局视口宽度就是展示视口。

<meta name="viewport" content="width=device-width">

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！