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

极客小俊

于 2024-03-12 20:23:20 发布

阅读量1k

点赞数 22

CC 4.0 BY-SA版权

分类专栏：编程开发免费教程文章标签： JavaScript Screen对象 Navigator对象脚本语言浏览器对象免费教程学习笔记

本文链接：https://blog.youkuaiyun.com/windowsxp2018/article/details/136661211

编程开发免费教程专栏收录该内容

82 篇文章

订阅专栏

本文介绍了JavaScript中的Screen对象用于获取屏幕分辨率，以及如何利用其属性动态调整窗口大小。同时，文章详细讲解了Navigator对象，涵盖了浏览器名称、版本、用户语言、cookie支持等信息，以及如何检查浏览器的MIME类型和Java支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

Screen对象

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

如下表:

书写格式	功能说明
screen.width	屏幕分辨率的宽度，例如1024*768分辨率下宽度为1024
screen.height	返回屏幕的高度
screen.availWidth	屏幕中可用的宽
screen.availHeight	屏幕中可用的高
screen.colorDepth	屏幕的色彩数

举个栗子

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

代码如下:

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

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

屏幕对象介绍

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

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

检测显示器参数

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

代码如下

//用with语句引用document的属性
with (document)
{
    document.write("您的屏幕显示设定值如下：<p>");	//输出提示语句
    document.write("屏幕的实际高度为", screen.availHeight, "<br>");//输出屏幕的实际高
    document.write("屏幕的实际宽度为", screen.availWidth, "<br>");//输出屏幕的实际宽
    document.write("屏幕的色盘深度为", screen.colorDepth, "<br>");//输出屏幕的盘深度
    document.write("屏幕区域的高度为", screen.height, "<br>");	//输出屏幕的区域高度
    document.write("屏幕区域的宽度为", screen.width);	//输出屏幕的区域宽度
}

如图

客户端显示器屏幕分辨率

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

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

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

举个栗子

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

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

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

举个栗子

//用with语句引用document的属性
with (document) {
	document.write(" 网页可见区域宽：" + document.documentElement .clientWidth + "<br>");		// 网页可见区域宽
	document.write(" 网页可见区域高：" + document.documentElement .clientHeight + "<br>");		// 网页可见区域高
	document.write(" 网页可见区域宽：" + document.documentElement .offsetWidth + " (包括边线和滚动条的宽)" + "<br>");
	document.write(" 网页可见区域高：" + document.documentElement .offsetHeight + " (包括边线的宽)" + "<br>");
	document.write(" 网页正文全文宽：" + document.documentElement .scrollWidth + "<br>");		// 网页正文全文宽
	document.write(" 网页正文全文高：" + document.documentElement .scrollHeight + "<br>");		// 网页正文全文高
	document.write(" 网页被卷去的高(ff)：" + document.documentElement .scrollTop + "<br>");		// 网页被卷去顶部分(ff)
	document.write(" 网页被卷去的高(ie)：" + document.documentElement.scrollTop + "<br>");
	document.write(" 网页被卷去的左：" + document.body.scrollLeft + "<br>");		// 网页被卷去左部分
	document.write('网页正文部分上：' + window.screenTop + '<br>');	// 网页正文部分上坐标
	document.write('网页正文部分左：' + window.screenLeft + '<br>');	// 网页正文部分左坐标
	document.write('屏幕分辨率的高：' + window.screen.height + '<br>');	// 分辨率高
	document.write('屏幕分辨率的宽：' + window.screen.width + '<br>');	// 分辨率宽
	document.write('屏幕可用工作区高度：' + window.screen.availHeight + '<br>');// 有效工作区高度
	document.write('屏幕可用工作区宽度：' + window.screen.availWidth + '<br>');// 有效工作区宽度
}

Navigator对象

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

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

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

代码如下

var showtext = "Navigator对象属性列表：<br>";
for (var propname in navigator) {
   showtext += propname + ": " + navigator[propname] + "<br>";
}
document.write(showtext);