前面的话

  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对象的更多相关文章

  1. 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 ...

  2. JS BOM基础 全局对象 window location history screen navigator

    全局变量声明的两种方式:1,window.变量名=值;2,var 变量名=值; 全局函数声明的两种方式:1,window.函数名=function(){}2,function 函数名=function ...

  3. BOM之navigator、history、screen对象

    navigator对象 [定义] navigator已经成为识别客户端浏览器的事实标准.下表中列出存在于所有浏览器的属性和方法 [检测插件] 检测浏览器插件是一种最常见的检测例程. [1]对于非IE浏 ...

  4. JavaScript的BOM(浏览器对象)基础语法总结

    1.window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 2.history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. ...

  5. 细看JS中的BOM、DOM对象

                                        DOM对象模型  DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的 ...

  6. JS浏览器对象:window对象、History、Location对象、Screen对象

    一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...

  7. JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象)

    JavaScript---Bom树的操作,内置方法和内置对象(window对象,location对象,navigator对象,history对象,screen对象) 一丶什么是BOM ​      B ...

  8. 了解screen对象的常用视图属性

    前面的话 screen对象基本上只用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素高度和宽度等.每个浏览器中的screen对象都包含着各不相同的属性.本文将详细介绍screen对象的 ...

  9. Navigator对象、Screen对象

    Navigator对象:         Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象:   Navigator对象集合:plugins[] 返回对 ...

随机推荐

  1. Mac 下搭建服务器

    1.开启服务器 Apache. sudo apachectl -k start 打开浏览器,在地址栏输入 localhost,如果出现 It works! 那么第一步已经成功了,如果没成功---出门左 ...

  2. HDU 3440 House Man(编号排序+线性差分约束跑最短路)

    House Man Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  3. Oracle 存储过程procedure之数据更新-游标

    在日常工作中,经常会碰到后台外导一批数据,并将外导数据处理至系统表中的情况. 面临这种情况,我一般采用写存储过程批处理的方式完成,写好一次以后,再次有导入需求时,只需要将数据导入到中间表,然后执行存储 ...

  4. php判断一个数组是否为另一个数组子集的方法

    原文地址http://www.jbxue.com/article/14703.html // 快速的判断$a数组是否是$b数组的子集  $a = array(135,138);  $b = array ...

  5. Ubuntu下搭建Ruby On Rails

    Ruby on Rails是一个非常高效的Web应用程序框架由David Heinemeier Hansson使用Ruby语言编写. 这是一个开源 Ruby 框架,用于开发数据库支持的Web应用程序. ...

  6. 软件设计、DDD概念及落地时的一些零碎思考和记录2

    主要是项目中一些落地经验和记录 技术人员.开发人员 大部分程序员真的不善于沟通,经常会显得很保守: 他们技术上的困惑.误解乃至郁闷都很难直接的表达清楚: 他们对自己的错误"印象"很 ...

  7. 实现MD5的加密和解密

    加密代码 public static string Encrypt(string Text, string sKey) { DESCryptoServiceProvider des = new DES ...

  8. Python3入门(十)——调试与测试

    一.异常处理 1.try...except...finally... 这个也就是Java里的try...cath..finally...了,直接看经典代码: try: print("开始执行 ...

  9. python基础——类定义(转)

    一.类定义: class <类名>: <语句> 类实例化后,可以使用其属性,实际上,创建一个类之后,可以通过类名访问其属性.如果直接使用类名修改其属性,那么将直接影响到已经实例 ...

  10. WPF编程,TextBlock中的文字修饰线(上划线,中划线,基线与下划线)的使用方法。

    原文:WPF编程,TextBlock中的文字修饰线(上划线,中划线,基线与下划线)的使用方法. 版权声明:我不生产代码,我只是代码的搬运工. https://blog.csdn.net/qq_4330 ...