BOM之screen对象
前面的话
screen对象在javascript编程中,比较冷门,不太常用。screen对象用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素高度和宽度等。本文将详细介绍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);//
console.log(screen.availWidth);//
【height】
屏幕的像素高度
【width】
屏幕的像素宽度
console.log(screen.width);//
console.log(screen.height);//
screen.height和screen.width两个属性,一般用来了解设备的分辨率。除非调整显示器的分辨率,否则这两个值可以看作常量,不会发生变化。显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率
可以根据屏幕分辨率,将用户导向不同网页
if ((screen.width <= 800) && (screen.height <= 600)) {
window.location.replace('small.html');
} else {
window.location.replace('wide.html');
}
BOM之screen对象的更多相关文章
- JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;
JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...
- JS BOM基础 全局对象 window location history screen navigator
全局变量声明的两种方式:1,window.变量名=值;2,var 变量名=值; 全局函数声明的两种方式:1,window.函数名=function(){}2,function 函数名=function ...
- BOM之navigator、history、screen对象
navigator对象 [定义] navigator已经成为识别客户端浏览器的事实标准.下表中列出存在于所有浏览器的属性和方法 [检测插件] 检测浏览器插件是一种最常见的检测例程. [1]对于非IE浏 ...
- JavaScript的BOM(浏览器对象)基础语法总结
1.window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 2.history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. ...
- 细看JS中的BOM、DOM对象
DOM对象模型 DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...
- JS浏览器对象:window对象、History、Location对象、Screen对象
一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...
- JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象)
JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象) 一丶什么是BOM B ...
- 了解screen对象的常用视图属性
前面的话 screen对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素高度和宽度等.每个浏览器中的screen对象都包含着各不相同的属性.本文将详细介绍screen对象的 ...
- Navigator对象、Screen对象
Navigator对象: Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象: Navigator对象集合:plugins[] 返回对 ...
随机推荐
- Android处理ListView中的Item中的Button按钮不能点击的问题
问题描述:ListView列表中的Button按钮按钮不能点击 解决办法:在ListView中的Item项的布局文件中加上:android:descendantFocusability="b ...
- TTL,COMS,USB,232,422,485电平之详细介绍及使用
如有错误敬请指导! 今天来详细介绍一下TTL,COMS,USB,232,422,485电平,以及之间的转换问题. 有些地方的引脚图可能不是规范的,具体引脚以自己的模块资料为主,这篇文章着重介绍使用.. ...
- 大数据入门第二十天——scala入门(二)scala基础01
一.基础语法 1.变量类型 // 上表中列出的数据类型都是对象,也就是说scala没有java中的原生类型.在scala是可以对数字等基础类型调用方法的. 2.变量声明——能用val的尽量使用val! ...
- 20155233 《网络对抗》Exp4 恶意代码分析
使用schtasks指令监控系统运行 先在C盘目录下建立一个netstatlog.bat文件,用来将记录的联网结果格式化输出到netstatlog.txt文件中,netstatlog.bat内容为: ...
- maven中添加jetty运行插件
maven项目,用jetty插件运行,对热部署的支持比较好.maven的pom文件加入下面代码 <plugin> <groupId>org.mortbay.je ...
- tf tensor 输出
在学习TensorFlow的过程中,我们需要知道某个tensor的值是什么,这个很重要,尤其是在debug的时候.也许你会说,这个很容易啊,直接print就可以了.其实不然,print只能打印输出sh ...
- mfc CProgressCtrl
CProgressCtrl常用属性 CProgressCtrl类常用成员函数 CProgressCtrl代码示例 一.CProgressCtrl控件属性 当我们在处理大程序时,常常需要耗很长时间(比如 ...
- 07-django项目
1.sql注入,xss攻击,csrf, sql注入 把sql命令插入到web表单,然后提交到所在页面请求,从而达到欺骗服务器执行恶意的sql命令 解决方法:不要使用动态拼接sql,把指令和数据分开,参 ...
- CF434D Nanami's Power Plant
就是切糕那道题,首先对每个函数连一串,然后\(x_u\leq x_v+d\)这个条件就是\(u\)函数\(i\)取值连向\(v\)函数\(i-d\)取值边权为inf,然后答案就是最小割了. #incl ...
- 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框
使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...