浏览器窗口大小和页面可视区大小（一）

最新推荐文章于 2024-05-13 09:58:35 发布

Axs1

最新推荐文章于 2024-05-13 09:58:35 发布

阅读量8.1k

点赞数 2

分类专栏：学习心得 HTML JS

本文链接：https://blog.csdn.net/Woyao01011/article/details/83825499

版权

JS 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

学习心得

16 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

innerWidth	innerHeight	outerWidth	outerHeight	document.doucument.Element.clientWidth / clientHeight	document.body.clientWidth /clientHeight
经测试Demo试验发现，在Chrome中，innnerWihth和outerWidth返回相同的值，为视口宽度；高度innnerHeight为视口高度，outerHeight为窗口高度；（但是在JS高级程序设计书中写道，在Chrome浏览器中，outerWidth/Height和innerWidth/Height返回的值都相同，都是视口的宽高。有点纠结...）				在IE,Firefox，Safari,Opera和Chrome中，这两个属性保存了页面视口的信息，在IE6中，这两个属性只有在标准模式下生效。（总结最后介绍了什么标准模式，什么是复杂模式）	如果是混杂模式，IE6 就要通过这两个属性得到视口的宽高；
		在IE9+、Safari和Firefox中，outerWidth/Height返回浏览器本身的窗口宽高尺寸。		对于Chrome，无论是标准模式还是混杂模式，随便使用哪个都可以取得视口（viewport）宽高；
在Opera中，innerWidth和innerHeight表示该容器中页面视图区域大小（减去边框宽度）；		在Opera中，这两个属性的值表示页面视图容器的大小；这里所谓的“页面视图容器”指的是Opera中单个标签页对应的浏览器窗口。		备注：页面的高度由内到外细分，如下图所示。
				备注：使用兼容性代码测试发现，获取视口大小的值，和在各个浏览下使用innerWidth和innerHeight获得的值大小相等；（可能不需要兼容了？各个浏览器都想Chrome一样可以直接用innerWidth了？）

测试Demo如下：

	<script type="text/javascript">
			var pageWidth=window.innerWidth,
				pageHeight=window.innerHeight,
				windowWdith=window.outerWidth,
				windowHeight=window.outerHeight;
			document.write("pageWidth="+pageWidth+"&emsp;&emsp;");
			document.write("pageHeight="+pageHeight+"<br />");
			document.write("windowWdith="+windowWdith+"&emsp;&emsp;");
			document.write("windowHeight="+windowHeight);
			


//Firefox
pageWidth=1536  pageHeight=730
windowWdith=1550  windowHeight=840 
//IE
pageWidth=1536  pageHeight=747        
windowWdith=1550  windowHeight=840 
//Chrome
pageWidth=1536  pageHeight=730
windowWdith=1536  windowHeight=826
//Opera
pageWidth=1496  pageHeight=726
windowWdith=1536  windowHeight=826
		</script>

<script type="text/javascript">
			var pageWidth=window.innerWidth,
				pageHeight=window.innerHeight;//Chrome浏览器可以使用innerWidth和innerHeight获得视口
				if(typeof pageWidth!="number"){
					if(document.compatible=="CSS1Compat"){
						pageWidth=document.documentElement.clientWidth;
						pageHeight=document.documentElement.clientHeight;
					}else{
						pageWidth=document.body.clientWidth;
						pageHeight=document.body.clientHeight;
					}
				}
			document.write("pageWidth="+pageWidth+"<br />");
			document.write("pageHeight="+pageHeight);
			/*
			 * Chrome
			 * pageWidth=1536
			 * pageHeight=730
			 * 
			 * IE
			 * pageWidth=1536
			 * pageHeight=747 
			 * 
			 * Firefox
			 * pageWidth=1536
			 * pageHeight=730 
			 * 
			 * Opera
			 * pageWidth=1496
			 * pageHeight=726
			 * 
			 */
		</script>

什么是标准模式？什么是复杂模式？

混杂模式和标准模式都是一种文档模式，文档模式都在html文件头部声明；

混杂模式会让IE浏览器的行为（包含非标准特性）与IE5相同；

标准模式则是让IE浏览器更接近标准行为；

另外还有准标准模式和超级标准模式，

超级标准模式会让浏览器的以其所有版本浏览器中最标准的行为去解释文档内容，而准标准模式下的浏览器大部分行为都是符合标准的，不符合标准的地方主要体现在处理图片间隙的时候。在表格中使用图片尤其明显；

如果在文档头部没有类似<!DOCTYPE html>的文档类型声明，就会触发混杂模式；

关闭超级标准模式，指定浏览器版本使用下面的代码：

“如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。”

“在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。”

Axs1

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
浏览器窗口大小和页面可视区大小（一）

innerWidth innerHeight outerWidth outerHeight document.doucument.Element.clientWidth / clientHeight document.body.clientWidth /clie...
复制链接

扫一扫

专栏目录