viewport 是专为移动端浏览器设计的 meta 标签。有些看似屏幕很小但分辩率却很大的智能手机，比如小米４的默认分辨率为：1920*1080，比许多电脑桌面的都还大，传统桌面网站直接放到手机上阅读时，界面就会显得非常小，阅读体验相对较差，所以需要一种将原始视图在手机上放大的机制，viewport 标签就是用来解决这个问题的。
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width : 表示此宽度不依赖于原始象素(px)，而依赖于屏幕的宽度，如iPhone 4（3.5寸）屏幕的大小相当于电脑屏幕上的320px显示的效果。下图为设置了viewport标签后在手机上的显示效果，注意右侧手机每格代表50个象素，目测为375px，即可能是iPhone 6之类机型尺寸显示的效果：
此外viewport port标签还有一些其它属性：
- initial-scale：初始缩放比例
- maximum-scale：允许缩放的最大比例
- minimum-scale：允许缩放的最小比例
- user-scalable：是否允许手动缩放
你也可以给 width 设置一个值，这意味着宽度属性实际上转化为一个最小宽度视图。例如，如果你的布局至少需要500像素宽，那么你可以使用下面的标记。当屏幕宽度大于500像素时，浏览器将扩大视图（而非放大），以适合屏幕：
<meta name="viewport" content="width=500, initial-scale=1">
下一节：css3的一个新特性就是可以支持自定义字体，使网页中显示用户本地不存在的字体。