`
TonySun3544
  • 浏览: 160280 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript获取屏幕对象

 
阅读更多

 

屏幕对象介绍
屏幕对象(screen)提供了获取显示器信息的功能,显示器信息的主要用途是确定网页在客户机是所能达到的最大显示空间。很多情况下,用户的显示器大小尺寸不尽相同,以同一尽寸设计的网页往往得不到期望的效果。为此需得知用户显示器的信息,在运行时
确定网页的布局 

检测显示器参数
检测显示器参数有助于确定网页在客户机上所能显示的大小,主要使用screen对象提供的接口。显示的参数一般都包括显示面积的宽、高度和色深等,其中宽、高度是比较有意义的,直接与网布局相关,色深只是影响图形色彩的逼真程度 。
<Script language="javascript">			
	with (document) 			//用with语句引用document的属性
	{
		write ("您的屏幕显示设定值如下:<p>");	//输出提示语句
		write ("屏幕的实际高度为", screen.availHeight, "<br>");//输出屏幕的实际高
		write ("屏幕的实际宽度为", screen.availWidth, "<br>");//输出屏幕的实际宽
		write ("屏幕的色盘深度为", screen.colorDepth, "<br>");//输出屏幕的盘深度
		write ("屏幕区域的高度为", screen.height, "<br>");	//输出屏幕的区域高度
		write ("屏幕区域的宽度为", screen.width);	//输出屏幕的区域宽度
		write("", screen.height,"<br>");
		write(sereen.availHeight);
	}
</Script>			
 
客户端显示器屏幕分辨率 
显示器分辨率是指显示器所能显示的宽度和高度,通常以像素(pixel)为单位,例如笔者的显示器的分辨率为1280*800。在实际应用中,为了使制作的网页能适应不同的浏览器环境,最好使用JavaScript程序对用户的显示器进行检测,动态调整网页的布局 。

客户端显示器屏幕的有效宽度和高度 
有效宽度和高度,是指打开客户端浏览器,所能达到的最大宽度和高度。在不同的操作系统中,操作系统本身也要占用一定的显示区域,所以在浏览器窗口以最大化打开时,不一定占满整个显示器屏幕。因此,有效宽度和高度就是指浏览器窗口所能占据的最大宽度
和高度 。
 
<Script language="javascript">			
	with(document)					// 设置上下文
	{
		writeln(" 网页可见区域宽:"+ document.body.clientWidth+"<br>");		// 网页可见区域宽
		writeln( " 网页可见区域高:"+ document.body.clientHeight+"<br>");		// 网页可见区域高
		writeln(" 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"<br>");
		writeln( " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"+"<br>");
		writeln(" 网页正文全文宽:"+ document.body.scrollWidth+"<br>");		// 网页正文全文宽
		writeln(" 网页正文全文高:"+ document.body.scrollHeight+"<br>");		// 网页正文全文高
		writeln( " 网页被卷去的高(ff):"+ document.body.scrollTop+"<br>");		// 网页被卷去顶部分(ff)
		writeln(" 网页被卷去的高(ie):"+ document.documentElement.scrollTop+"<br>");
		writeln( " 网页被卷去的左:"+ document.body.scrollLeft+"<br>");		// 网页被卷去左部分
		writeln( " 网页正文部分上:"+ window.screenTop+"<br>");	// 网页正文部分上
		writeln( " 网页正文部分左:"+ window.screenLeft+"<br>");	// 网页正文部分左
		writeln( " 屏幕分辨率的高:"+ window.screen.height+"<br>");	// 分辨率高
		writeln(" 屏幕分辨率的宽:"+ window.screen.width+"<br>");	// 分辨率宽
		writeln(" 屏幕可用工作区高度:"+ window.screen.availHeight+"<br>");// 有效工作区高度
		writeln( " 屏幕可用工作区宽度:"+ window.screen.availWidth+"<br>");// 有效工作区宽度
	}
   </script>	
 


 

分享到:
评论
1 楼 dxwwym 2011-12-20  
这个不错.

相关推荐

    100个直接可以拿来用的JavaScript实用功能代码片段(1-10)

    40、原生JavaScript获取移动设备屏幕宽度 41、原生JavaScript完美判断是否为网址 42、原生JavaScript根据样式名称检索元素对象 43、原生JavaScript判断是否以某个字符串开头 44、原生JavaScript判断是否以某个字符串...

    javascript常用对象梳理

    功能:locationbar属性也可以看成是一个子对象,这个属性用来获取它自已的 visible属性来确定位置栏是否可见。 到目前为止,该属性只有一个子属性:visible。 注:IE5.5不支持该属性。 7. locationbar.visible...

    【JavaScript源代码】JavaScript中BOM和DOM详解.docx

    2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM...

    javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...

    源文件程序天下JAVASCRIPT实例自学手册

    7.4.1 获取客户端屏幕信息 7.4.2 定位窗口到指定位置 7.4.3 常见属性和方法汇总 7.5 History对象 7.5.1 使用back()和forward()方法进行站点导航 7.5.2 使用go()方法进行站点导航 7.5.3 常见属性和方法汇总 7.6 ...

    JavaScript基础和实例代码

    7.4.1 获取客户端屏幕信息 7.4.2 定位窗口到指定位置 7.4.3 常见属性和方法汇总 7.5 History对象 7.5.1 使用back()和forward()方法进行站点导航 7.5.2 使用go()方法进行站点导航 7.5.3 常见属性和方法汇总 7.6 ...

    通过JAVAScript实现页面自适应

    实现原理: 获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关对象的长宽,绝对位置等属性,但是在WEB上程序没有办法...

    程序天下:JavaScript实例自学手册

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    使用 ML5.js 和 COCO-SSD 模型的 AI 对象检测 Web 应用程序

    它可以通过计算机摄像头实时检测视频中的对象,并在屏幕上显示其位置和标签。这种应用程序可用于安全监控、自动化控制和智能家居等领域。 整个应用程序的HTML和CSS代码定义了界面,包括一个开关和FPS滑块。用户可以...

    《程序天下:JavaScript实例自学手册》光盘源码

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    javascript获取网页各种高宽及位置的方法总结

    获取屏幕的高宽(分辨率) screen.width //屏幕的宽 screen.height //屏幕的高 screen.availWidth //屏幕可用宽度 屏幕的像素高度减去系统部件高度之后的值 screen.availHeight //屏幕可用高度 屏幕的像素宽度减去...

    JavaScript实例精通

    JavaScript实例精通 1.本书1~20章所附代码的运行环境 操作系统:Windows 2003、Windows XP Professional,或者Windows 2000 开发环境:、Dreamwave、Notepad、UltraEdit,或者其他文本编辑器 Web服务器:IIS 5.1及...

    《JavaScript实例精通》[源代码]

    11_7.htm 跟随屏幕移动的图像。 第12章(\12) 示例描述:菜单特效。 12_1.htm 左键弹出式菜单 12_2.htm 推拉门式样的菜单。 12_3.htm 浮动顶部的菜单。 12_4.htm 浮动底部的菜单。 12_5.htm 渐显效果...

    JavaScript网页特效范例宝典源码

    实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...

    JavaScript笔记

    15.JavaScript中的所有事物都是对象,分为三类: |--简单对象:String、Number、Boolean |--组合对象:Array、Math、Date |--复杂对象:Function、Regex、Object等 16.Array排序: |--升序:function compare(a...

    html5实现飞机打怪兽射击小游戏的示例代码

    canvas 做游戏还是比较有趣的,另外还可以把这个游戏加以扩展,改成手机版,画布尺寸通过获取屏幕宽高确定,键盘部分改成触摸事件(touchstart、touchmove、touchend),怪兽出现方式也可以改成从屏幕顶端随机下落,...

    精通javascript

    • 1.3.htm 调用外部JavaScript文件 • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值...

    ASMLIB:用于 v4.0 浏览器的跨浏览器 Javascript 库

    获取对象(对象) 将对象字符串名称转换为任何 4.0+ 浏览器可用的有效对象引用。 重绘屏幕() 仅适用于 Netscape 4。 调整大小时刷新浏览器窗口以避免 Netscape CSS 丢失信息。 得到左(对象) 返回对象的 X ...

    JavaScript 基础(八)【BOM】

    Js通过浏览器对象模型(BOM)来和浏览器进行交互,可以获取屏幕尺寸,窗口大小,页面地址,历史记录等浏览器相关信息,也可以控制浏览器执行某些行为:弹出信息,页面跳转,打开窗口,关闭窗口,调整窗口大小等。...

Global site tag (gtag.js) - Google Analytics