一、什么是viewport
viewport就是我们移动设备屏幕上显示网页的那一块区域，就是浏览器显示网页的区域。一般情况下移动设备的viewport比浏览器的viewport要大。为什么要设置meta viewport标签呢？一般移动设备viewport的宽度默认为980px或者是1024px，这样就会出现横向的滚动条。
一些移动设备默认浏览器宽度
二、layout viewport、visual viewport、idea viewport
移动设备上的三个viewport。
1.layout viewport表示浏览器默认的viewport。viewport的宽度可以通过document.documentElement.clientWidth来获取。
2.visua viewport表示浏览器可以看见的区域，viewport的宽度可以通过window.innerWidth来获取。
3.idea viewport表示移动设备的理想viewport。
idea viewport：用户不需要进行缩放，滚动条，字体大小合适，图片清晰度高。
ideaviewport的宽度等于移动设备屏幕的宽度。
三、meta标签viewport的属性
<meta name="viewport" content="width=device-width, initial-scale=1.0"
, maximum-scale=1.0, user-scalable=0"
该<meta>表示viewport的宽度等于屏幕的宽度，用户不允许进行缩放页面。
设置idea viewport
<meta name="viewport" content="width=device-width>
或者
<meta name="viewport" content="initial-scale=1.0">
这里注意：initial-scale=1.0表示没有对页面进行缩放，但是缩放是对idea viewport进行缩放的。
当width和initial-scale同时出现
<meta name="viewport" content="width=980, initial-scale=1.0">
当二者同时出现且width的值不是device-width时，浏览器会取两个中值最大的那个。（例如 width=980，idea viewport的宽是1024，则浏览器取idea viewport的宽。相反则取width的值）。
但是以上几种情况都会有极个别的小缺陷，就是某些移动设备的横屏、竖屏不分。于是就有了一种写法。
<meta name="viewport" content="width=device-width, initial-scale=1.0">