移动浏览器中的viewport与MediaQueries中的width和device-width

什么是viewport

传统的web页面在开发时，通常考虑的是页面在PC端浏览器中的展示状况而不会考虑在移动设备上的展示效果。为了解决传统页面在屏幕分辨率远小于PC的移动设备上的Web展示问题，Apple Safari首先定义了viewport虚拟窗口，其默认大小为980像素（大部分网站的标准宽度）。移动Safari在显示页面时，会首先在虚拟窗口中完成Web页面的展示，然后按一定的比例缩小。也就是说，当开发者没有定义viewport虚拟窗口大小的情况下，浏览器先以980像素的浏览器标准加载网页，然后再以一定的比例缩小，这是一个整体的缩小过程，页面上的所有元素都会缩小。经过缩小，页面上的各部分都会因为太小而不容易浏览，所以开发者通常需要制定viewport的大小，如

<meta name="viewport"content="width=device-width initial-scale=1,user-scalable=0" />

这里将viewport宽度改变为设备宽度device-width，这样页面一开始就能在设备大小的虚拟窗口内进行加载而不需额外的缩小了。除了Safari浏览器，其他浏览器也支持viewport虚拟窗口。

但是，大家可以想象，如果不对页面做额外的处理，单纯将viewport大小设为设备大小，出来的效果也是不佳的，就好比在PC桌面浏览器上浏览的网页中某个元素的width被设置成了5000px。而Media Queries就是为了解决这个问题而来的。

什么是Media Queries

Media Queries就是媒体查询，是CSS3规范的一部分，简言之就是判断当前媒体设备的类型进而决定采取何种样式，其语法是

@media [media_query] media_type and media_feature

使用Media Queries样式模块必须以@media开头

Media_query是查询关键字，可以是not或only

media_type指定设备类型

media_feature是判断条件，其决定是否启用该样式

如：

@media only screen and (max-width:400px) {

    #navbar {

        float: none;

        width: 400px;

    }

}

其表示当在有屏幕的设备上，且浏览器宽度不超过400px时应用其大括号内的样式。此外还可以根据设备屏幕宽度来决定样式，如:

@media only screen and (max-device-width:400px) {

    #navbar {

        float: none;

        width: 400px;

    }

}

而什么时候用width什么时候用device-width是比较容易混淆的，加上在viewport的设置里也有个device-width，就更混乱了，下面做下总结：

1.                .width是指浏览器的视区宽度，即浏览器窗口的宽度，也就说在pc浏览器上，你拖动浏览器窗口改变大小会使Media Queries的判断结果发生改变，从而使用不同的样式。

2.                而device-width是指设备的宽度，即屏幕的实际宽度，因为不是每个人都会全屏地使用浏览器（特别是PC桌面端），如果你希望在浏览器大小变化时样式也跟着改变则width是你更好的选择。

但是，对于总是全屏显示的移动端浏览器来说，当你在Media Queries中用width时可能希望它与device-width是一样的。不过不要忘了，移动端浏览器会先在viewport虚拟窗口里加载页面，所以当你不幸地没有设置viewport大小时，Media Queries还是以默认视区大小（980px）与你的max-width或min-width比较，从而展示出桌面版本。这时候需要在meta里指定viewport的宽度为device-width，这样就能在Media Queries中放心使用width了。