前面的话

  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. C#抽象类与抽象方法--就是类里面定义了函数而函数里面什么都没有做的类

    看一下代码应该就可以了 using System; using System.Collections.Generic; using System.Linq; using System.Text; na ...

  2. office2016word 每次打开都有进度条问题 解决方式

      最佳答案   每次打开Office 2016都提示配置进度(包括Word.PPT.Excel等等Office产品都有这种现象),如图,先是显示“安装程序正在准备必要的文件”,接着显示“正在配置Mi ...

  3. Linux 内核开发 - 内核定时器

    时间差的度量 系统的定时器硬件以固定的频率产生时钟中断,产生始终中断的间隔以HZ 常量来决定,通常在50~1200之间,x86默认是1000.HZ能够依据不同的内核来配置. Linux 採用jiffi ...

  4. 20155216 Exp3 免杀原理与实践

    Exp3 免杀原理与实践 基于特征码的改变来实现免杀(实践过程记录) MSF编码器编译后门检测 可以通过VirSCAN来检验后门抗杀能力. ps:选择后门前修改其文件名,不得含有数字. 如上图所示,3 ...

  5. vue 打包后,后缀名为.woff等字体问题不能用解决办法

    1.打开 build / webpack.prod.conf.js ,找到 module: { rules: utils.styleLoaders({ sourceMap: config.build. ...

  6. 一段程序的分析——C++析构器,何时析构

    最近在看小甲鱼的视频,有段程序是这么写的: #include <iostream> #include <string> class Pet { public: Pet(std: ...

  7. C语言学习之联合类型

    前言 联合(union)是一种特殊的数据类型,和结构体很像,结构体各成员变量有自己独立的存储位置,而联合的成员变量共享同一片存储区域,因此联合变量再一个时刻只能保存它的某一个成员的值. 联合的定义和初 ...

  8. 11、Dockerfile实战-Tomcat

    一.编写Dockerfile 具体步骤这里不再细说,直接看Dockerfile文件: FROM centos:7 MAINTAINER QUNXUE ENV VERSION=8.0.46 RUN yu ...

  9. TensorFlow训练MNIST数据集(1) —— softmax 单层神经网络

    1.MNIST数据集简介 首先通过下面两行代码获取到TensorFlow内置的MNIST数据集: from tensorflow.examples.tutorials.mnist import inp ...

  10. 微信小程序初体验与DEMO分享

    前言 前一段时间微信公布小程序,瞬间引来了大量的关注.博主的公司也将其定为目标之一,遂派本菜为先头兵(踩坑侠). 这次开发了一个比较完整的DEMO,模仿自某个APP首页,由于保护隐私的目的我把数据拷贝 ...