如图，通过点击全屏图标实现页面全屏/取消全屏功能，类似浏览器f11。
一、icon图标选择：
这里偷懒使用的阿里巴巴矢量图标库，当然也可以自己找ui设计一个，地址：icon图标库，icon相关代码如下：
### css代码：
.nav .nav-icon {
position: relative;
min-width: 56px;
height: 56px;
background-repeat: no-repeat;
background-position: center center;
}
.nav .nav-text {
position: relative;
text-align: center;
color: white;
}
#userinfo .nav-icon {
background-image: url(images/wbs-tool-userinfo.png);
}
#full_screen .nav-icon {
background-image: url(images/wbs-tool-full.png);
}
### div代码：
icon可以根据需要的分辨率及颜色下载时进行调整：
二、全屏功能实现：
function fullClick(){
//全屏
var el = window.parent.document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
};
//退出全屏
var el2 = window.parent.document;
if (el2.exitFullscreen) {
el2.exitFullscreen();
}
else if (el2.mozCancelFullScreen) {
el2.mozCancelFullScreen();
}
else if (el2.webkitCancelFullScreen) {
el2.webkitCancelFullScreen();
}
else if (el2.msExitFullscreen) {
el2.msExitFullscreen();
}
if(typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
return false;
}