jquery获取浏览器和屏幕的高度和宽度


1、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jquery获取浏览器和屏幕的高度和宽度</title>
		<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
		<style>
			body,html{
				width: 100%;
				height: 100%;
				font-family: "微软雅黑";
				font-size: 12px;
				font-feature-settings: normal;
				font-kerning: initial;
			}
			table{
				border-collapse: collapse;
				border: 1px dashed #CCCCCC;
				width: 60%;
				font-size: 16px;
				font-family: "arial, helvetica, sans-serif";
			}
			table tr{
				border: 1px dotted #CCCCCC;
				font-size: 16px;
				font-family: "arial rounded mt bold";
			}
			table td,input{
				border: 1px double #CCCCCC;
				font-size: 28px;
				font-family: "agency fb";
				background-origin: border-box;
			}
			#heightWidth{
				border: 1px groove #000;
				font: "微软雅黑";
				font-size: 20px;
				font-stretch: expanded;
				font-size-adjust: initial;
				font-synthesis: initial;
				backface-visibility: visible;
				background-color: #000000;
				color: #FFFFFF;
				font-weight: bolder;
				fill-opacity: opacity-value;
			}
		</style>
		<script>
			$(document).ready(function(){
				$("#heightWidth").click(function(){
					//获取浏览器当前窗口可视区域高度
					var winHeight = $(window).height();
					//获取浏览器当前窗口可视区域宽度
					var winWidth = $(window).width();
					//获取当前窗口文档的高度
					var docHeight = $(document).height();
					//获取当前窗口文档的宽度
					var docWidth = $(document).width();
					//获取当前窗口文档body的高度
					var docBodyHeight = $(document.body).height();
					//获取当前窗口文档body的宽度
					var docBodyWidth = $(document.body).width();
					//获取浏览器当前窗口文档body的总高度
					var allHeight = $(document.body).outerHeight(true);
					//获取浏览器当前窗口文档body的总宽度
					var allWidth = $(document.body).outerWidth(true);
					
					$("#winHeight").val(winHeight);
					$("#winWidth").val(winWidth);
					$("#docHeight").val(docHeight);
					$("#docWidth").val(docWidth);
					$("#docBodyHeight").val(docBodyHeight);
					$("#docBodyWidth").val(docBodyWidth);
					$("#allHeight").val(allHeight);
					$("#allWidth").val(allWidth);
				});
			});
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<label for="winHeight">获取浏览器当前窗口可视区域高度</label>
				</td>
				<td>
					<input type="text" id="winHeight" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="winWidth">获取浏览器当前窗口可视区域宽度</label>
				</td>
				<td>
					<input type="text" id="winWidth" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="docHeight">获取当前窗口文档的高度</label>
				</td>
				<td>
					<input type="text" id="docHeight" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="docWidth">获取当前窗口文档的宽度</label>
				</td>
				<td>
					<input type="text" id="docWidth" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="docBodyHeight">获取当前窗口文档body的高度</label>
				</td>
				<td>
					<input type="text" id="docBodyHeight" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="docBodyWidth">获取当前窗口文档body的宽度</label>
				</td>
				<td>
					<input type="text" id="docBodyWidth" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="allHeight">获取浏览器当前窗口文档body的总高度</label>
				</td>
				<td>
					<input type="text" id="allHeight" />
				</td>
			</tr>
			<tr>
				<td>
					<label for="allWidth">获取浏览器当前窗口文档body的总宽度</label>
				</td>
				<td>
					<input type="text" id="allWidth" />
				</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: center;">
					<input type="button" id="heightWidth" value="获取高度和宽度" />
				</td>
			</tr>
		</table>
	</body>
</html>

2、实现结果

jquery获取浏览器和屏幕的高度和宽度_知识