【你也能从零基础学会网站开发】Web建站之javascript入门篇 JavaScript中的Screen屏幕对象与Navigator浏览器信息对象

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

Screen对象

Screen对象属于window的子对象, 常用于获取屏幕的分辨率和色彩!

如下表:

举个栗子

比如:我们现在要实现窗口最大化!

代码如下:

window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
1
2

采用screen对象的分辨率属性和resizeTo方法来动态确定窗口最大长度和宽度!

屏幕对象介绍

屏幕对象（screen）提供了获取显示器信息的功能，显示器信息的主要用途是确定网页在客户机是所能达到的最大显示空间。

很多情况下，用户的显示器大小尺寸不尽相同，以同一尽寸设计的网页往往得不到期望的效果。
为此需得知用户显示器的信息，在运行时确定网页的布局

检测显示器参数

检测显示器参数有助于确定网页在客户机上所能显示的大小，主要使用screen对象提供的接口。
显示的参数一般都包括显示面积的宽、高度和色深等，其中宽、高度是比较有意义的，直接与网布局相关，色深只是影响图形色彩的逼真程度!

代码如下

//用with语句引用document的属性
with (document)
{
    document.write("您的屏幕显示设定值如下：
");	//输出提示语句
    document.write("屏幕的实际高度为", screen.availHeight, "
");//输出屏幕的实际高
    document.write("屏幕的实际宽度为", screen.availWidth, "
");//输出屏幕的实际宽
    document.write("屏幕的色盘深度为", screen.colorDepth, "
");//输出屏幕的盘深度
    document.write("屏幕区域的高度为", screen.height, "
");	//输出屏幕的区域高度
    document.write("屏幕区域的宽度为", screen.width);	//输出屏幕的区域宽度
}
1
2
3
4
5
6
7
8
9
10

如图

客户端显示器屏幕分辨率

显示器分辨率是指显示器所能显示的宽度和高度，通常以像素（pixel）为单位

例如笔者的显示器的分辨率为1280*800。

在实际应用中，为了使制作的网页能适应不同的浏览器环境，最好使用JavaScript程序对用户的显示器进行检测，动态调整网页的布局 。

举个栗子

客户端显示器屏幕的有效宽度和高度
有效宽度和高度，是指打开客户端浏览器，所能达到的最大宽度和高度。

在不同的操作系统中，操作系统本身也要占用一定的显示区域，所以在浏览器窗口以最大化打开时，不一定占满整个显示器屏幕。

因此，有效宽度和高度就是指浏览器窗口所能占据的最大宽度和高度 。

举个栗子

//用with语句引用document的属性
with (document) {
	document.write(" 网页可见区域宽：" + document.documentElement .clientWidth + "
");		// 网页可见区域宽
	document.write(" 网页可见区域高：" + document.documentElement .clientHeight + "
");		// 网页可见区域高
	document.write(" 网页可见区域宽：" + document.documentElement .offsetWidth + " (包括边线和滚动条的宽)" + "
");
	document.write(" 网页可见区域高：" + document.documentElement .offsetHeight + " (包括边线的宽)" + "
");
	document.write(" 网页正文全文宽：" + document.documentElement .scrollWidth + "
");		// 网页正文全文宽
	document.write(" 网页正文全文高：" + document.documentElement .scrollHeight + "
");		// 网页正文全文高
	document.write(" 网页被卷去的高(ff)：" + document.documentElement .scrollTop + "
");		// 网页被卷去顶部分(ff)
	document.write(" 网页被卷去的高(ie)：" + document.documentElement.scrollTop + "
");
	document.write(" 网页被卷去的左：" + document.body.scrollLeft + "
");		// 网页被卷去左部分
	document.write('网页正文部分上：' + window.screenTop + '
');	// 网页正文部分上坐标
	document.write('网页正文部分左：' + window.screenLeft + '
');	// 网页正文部分左坐标
	document.write('屏幕分辨率的高：' + window.screen.height + '
');	// 分辨率高
	document.write('屏幕分辨率的宽：' + window.screen.width + '
');	// 分辨率宽
	document.write('屏幕可用工作区高度：' + window.screen.availHeight + '
');// 有效工作区高度
	document.write('屏幕可用工作区宽度：' + window.screen.availWidth + '
');// 有效工作区宽度
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Navigator对象

Navigator 对象包含有关浏览器的信息, 也属于window的子对象, 只有属性, 常用于获取客户端浏览器和操作系统信息!

常用的属性有如下几个:
appCodeName 浏览器的名称
appVersion 浏览器的版本和操作系统名称
userLanguage 用户语系
cookieEnabled 是否支持cookie

我们可以通过一个简单的方法来获取Navigator对象的所有属性:

代码如下

var showtext = "Navigator对象属性列表：
";
for (var propname in navigator) {
   showtext += propname + ": " + navigator[propname] + "
";
}
document.write(showtext);
1
2
3
4
5

如下

所以获取浏览器对象的属性值
在进行Web开发时，通过Navigator对象的属性来确定用户浏览器的版本，进而编写有针对某一浏览器版本的代码。

appCodeNam，浏览器的代码名称 。
appName，浏览器的实际名称 。
appVersion，浏览器的版本号和平台信息 。
MimeType对象和Plugin对象
MimeType对象提供当前浏览器所支持的MIME类型信息，其中MIME类型信息以数组的形式保存。

Plugin主要管理当前浏览器中已经安装的插件或外挂程序的信息，在应用中该对象非常重要。

例如检测当前浏览器是否已经安装FLASH播放器插件，如果还没有则可以提醒用户下载并安装，这对包含FLASH内容的网页非常重要。

下面通过例子说明如何枚举浏览器所支持的MIME类型:

如图

浏览器对象的javaEnabled
javaEnabled方法用于判断当前浏览器是否已经启用Java支持功能。

该方法对于包含JavaApplet（在本书第19章专门讲解）程序的网页非常有用，由此方法得出的结果以确定是否使用Java程序。对于不包含Java程序的网页意义不大 。

如图

"👍点赞" "✍️评论" "收藏❤️"
大家的支持就是我坚持下去的动力!

---

如果以上内容有任何错误或者不准确的地方，🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法，
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇