BOM之屏幕对象

 screen对象包含有关客户端显示屏幕的信息,屏幕对象是Javascript运行时自动产生的对象,它实际上是独立于窗口对象的,屏幕对象主要包含了计算机屏幕的尺寸大小和颜色信息。

这些信息只能读取,不可以设置,使用时只要直接引用screen对象就可以了,调用格式:“screen.属性”。

通过使用屏幕的可用高度和可用宽度,可以设置窗口对象的尺寸。例如:可以用Javascript程序将网页窗口充满全屏幕:window.resizeTo(screen.availWidth,screen.availHeight);

可以利用screen的某些属性获取用户的信息来调整浏览器窗口的大小,占据屏幕的可用空间。

每个浏览器中的screen对象都包含着各不相同的属性,其中chrome包含9个属性,firefox包含10个,IE8-浏览器包含14个,IE9+浏览器包含17个。下面将这17个属性概述如下:

通过使用屏幕的可用高度和可用宽度,可以设置窗口对象的尺寸。

属性              说明

height            屏幕的像素高度
width             屏幕的像素宽度
availHeight       屏幕的像素高度减去系统部件高度之后的值(只读)
availWidth        屏幕的像素宽度减去系统部件宽度之后的值(只读)

left              当前屏幕距左边的像素距离[firefox返回0,chrome和IE不支持]
top               当前屏幕距上方的像素距离[firefox返回0,chrome和IE不支持]
availLeft         未被系统部件占用的最左侧的像素值(只读)[chrome和firefox返回0,IE不支持]
availTop          未被系统部件占用的最上方的像素值(只读)[chrome和firefox返回0,IE不支持]

bufferDepth       读、写用于呈现屏外位图的位数[IE返回0,chrome和firefox不支持]
colorDepth        用于表现颜色的位数(只读)[IE8-返回32,其他浏览器返回24]
pixelDepth        屏幕的位深(只读)[IE8-不支持,其他浏览器返回24]

deviceXDPI        屏幕实际的水平DPI(只读)[IE返回96,chrome和firefox不支持]
deviceYDPI        屏幕实际的垂直DPI(只读)[IE返回96,chrome和firefox不支持]
logicalXDPI       屏幕逻辑的水平DPI(只读)[IE返回96,chrome和firefox不支持]
logicalYDPI       屏幕逻辑的垂直DPI(只读)[IE返回96,chrome和firefox不支持]

updateInterval      读、写以毫秒表示的屏幕刷新时间间隔[IE返回0,chrome和firefox不支持]
fontSmoothingEnabled     是否启用了字体平滑(只读)[IE返回true,chrome和firefox不支持]

常用

【availHeight】

  屏幕的像素高度减去系统部件高度之后的值(只读),代表屏幕可用高度,单位为像素

【availHeight】

  屏幕的像素宽度减去系统部件宽度之后的值(只读),代表屏幕可用宽度,单位为像素

console.log(screen.availHeight);//1040
console.log(screen.availWidth);//1920

【height】

  屏幕的像素高度

【width】

  屏幕的像素宽度

console.log(screen.width);//1920
console.log(screen.height);//1080

  screen.height和screen.width两个属性,一般用来了解设备的分辨率。除非调整显示器的分辨率,否则这两个值可以看作常量,不会发生变化。显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率

  可以根据屏幕分辨率,将用户导向不同网页

if ((screen.width <= 800) && (screen.height <= 600)) {
window.location.replace('small.html');
} else {
window.location.replace('wide.html');
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值