主要是手机屏幕比桌面浏览器小，传统网页的设计在手机上表现不佳。苹果在移动版的Safari中定义了viewportmeta标签（如果我没记错的话是最先提出来的），用来创建一个虚拟窗口（layoutviewport），这个虚拟窗口的分辨率接近于桌面显示，这也是Apple定义为980px。然后将虚拟窗口映射到移动设备的屏幕上，按比例缩放并重新呈现网页。Virtualwindowlayoutviewport移动浏览器默认将视口设置为较宽的值（防止太窄时可见区域显示混乱）。这个默认视口称为布局视口。宽度可以通过Js获取（基本上所有设备都支持）document.documentElement.clientWidth可视窗口visualviewport浏览器可视区域大小。可以理解为手机的物理屏幕。宽度可以通过Js获取（不支持Android2、OperaMini、UC8）idealviewport完美适配移动设备的viewport。理想状态是不需要用户缩放和水平滚动条就可以正常查看，并且显示的文字大小合适，不管分辨率，屏幕密度等。移动端默认使用布局视口，如果我们想实现类似idealviewport的效果，我们可以通过meta标签来控制viewport。移动开发中必须出现的定义
