前面的话

  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. ROS初级教程 cmake cmakelist.txt 的编写教程

    有很多 的时候我们使用别人的程序包.然后添加东西的时候缺少什么东西,会使程序编译不过去,甚至无法运行,接下来介绍一下cmakelist.txt 的每一行的作用.为了以后添加和修改方便. 2.整体结构和 ...

  2. drupal 7 连接多个数据库

    Drupal7系统,重写了数据库操作内核,其强大的功能无需多言.一次偶然的机会,需要提取Drupal默认安装数据库之外的一个数据库中的数据 ,可谓是绞尽脑汁,上网查阅最后终于找到了一个笨而又合适的方法 ...

  3. EF Core中如何取消跟踪DbContext中所有被跟踪的实体

    首先定义一个DbContext的扩展类DbContextDetachAllExtension,其中包含一个DbContext的扩展方法DetachAll,用来取消跟踪DbContext中所有被跟踪的实 ...

  4. 【小程序】<image>图片实现宽度100%时,高度自适应

    *.wxss样式设置 .img{ width:100% } *.wxml给<image>标签添加属性  mode="widthFix" <image class= ...

  5. 如何挂载另一个lvm硬盘

    由于测试导致系统启动不了,需要将系统中的数据拷贝出来,所以想到将磁盘挂载到另一个能用的系统中进行拷贝,但是由于创建的系统都是用默认的方式创建的,所以一般的系统盘都是由两个分区组成,例如/dev/sda ...

  6. 动画:view从点逐渐变大(放大效果)

    -(void) animationAlert:(UIView *)view { CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation ani ...

  7. 2017-2018-2 20155315《网络对抗技术》Exp7 :网络欺诈防范

    实验目的 本实践的目标理解常用网络欺诈背后的原理,以提高防范意识,并提出具体防范方法. 实验内容 简单应用SET工具建立冒名网站 ettercap DNS spoof 结合应用两种技术,用DNS sp ...

  8. Kubernetes学习之路(二十三)之资源指标和集群监控

    目录 1.资源指标和资源监控 2.Weave Scope监控集群 (1)Weave Scope部署 (2)使用 Scope (3)拓扑结构 (4)实时资源监控 (5)在线操作 (6)强大的搜索功能 2 ...

  9. ES6 之reduce的高级技巧

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值.reduce() 方法接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 ...

  10. [CF1039E]Summer Oenothera Exhibition[根号分治+lct]

    题意 给一个长度为 \(n\) 的序列, \(q\) 次询问,次给一个 \(k_i\) ,问最少将序列划分成多少次,满足每一段的极差不超过\(w−k_i\). \(1 \leq n, q \leq 1 ...