js 检测屏幕分辨率


class screenChecker {
constructor() {
this.screen = window.screen;
this.fullscreen = false;
this.screenSize = {
width: 0,
height: 0,
};
this.init();
}
getScreenSize() {
const {
height,
width,
} = this.screen;
return {
width,
height,
};
}
isFullScreen() {
// 全屏判断逻辑,可用的屏幕大小等于实际的屏幕大小, 浏览器地址栏高度为 0
// availLeft, availTop, 不推荐使用
const {
availHeight,
availWidth,
height,
width,
} = this.screen;
this.fullscreen = (availHeight === height && availWidth === width);
return this.fullscreen;
}
getDepth() {
const {
colorDepth,
pixelDepth,
} = this.screen;
return {
colorDepth,
pixelDepth,
};
}
isScreenResized() {
// TODO: 屏幕缩放检测
return false;
}
getOrientation() {
// 屏幕方向,判断屏幕是否旋转
const {
orientation: {
angle,
type,
// onchange,
},
} = this.screen;
return {
angle,
type,
};
}
init() {
this.getScreenSize();
this.isFullScreen();
}
} export default screenChecker;

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


js 检测屏幕分辨率的更多相关文章

  1. js判断屏幕分辨率的代码

    通过下面的代码判断分辨率 <script language="JavaScript"> <!-- Begin function redirectPage() { ...

  2. #JS 获取屏幕分辨率、网页可见区域等

    window.screen document.body <script type="text/javascript"> function getInfo(){ var ...

  3. JS获取屏幕分辨率以及当前对象大小等

    <script type="text/javascript"> function getInfo(){ var s = ""; s += " ...

  4. JS对象 屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息。 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽

    屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息. 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽 注意: 1.单位 ...

  5. JS根据屏幕分辨率改变背景宽高

    //控制浏览器显示的高宽 function document_loaded() { GotoMainStep(); /; document.getElementById("main1&quo ...

  6. jquery和js检测浏览器窗口尺寸和分辨率

    jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...

  7. (转)JS获取当前对象大小以及屏幕分辨率等

    原文 JS获取当前对象大小以及屏幕分辨率等   <script type="text/javascript">function getInfo(){       var ...

  8. JS获取当前对象大小以及屏幕分辨率等...

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...

  9. 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

    效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...

随机推荐

  1. 炸裂!MySQL 82 张图带你飞

    之前两篇文章带你了解了 MySQL 的基础语法和 MySQL 的进阶内容,那么这篇文章我们来了解一下 MySQL 中的高级内容. 其他文章: 138 张图带你 MySQL 入门 47 张图带你 MyS ...

  2. nginx.service: control process exited, code=exited status=1

    安装linux的宝塔面板,结果面板显示nginx和php已经运行了,但是机器系统上并没有运行.记录一次nginx报错,操作步骤看下代码: [root@localhost nginx]# systemc ...

  3. 强制杀死进程后,进程相关的socket未必发送RST

    强制杀死进程后,进程相关的socket未必发送RST

  4. 浅谈自动化构建之gulp

    一.gulp的基本使用 gulp是目前最流行的前端自动化构建系统,核心特点高效易用.(这块不过多的废话了,直接上干货了,有兴趣的话,可以查下gulp简介) 步骤如下: yarn init -y yar ...

  5. Result Maps collection already contains value for xxxMapper.BaseResultMap错误解决办法

    原因分析: 这些代码因为是工具自动生成的,所以也没仔细检查.一个小小的错误,导致的. 解决办法: 1.由于使用ibatis的TempTestTableMapper.xml实现接口TempTestTab ...

  6. Spring Boot 整合 Freemarker

    Spring Boot 整合 Freemarker 1.Freemarker 简介 2.Spring Boot 整合 Freemarker 2.1 创建工程 2.2 创建类 2.3 其他配置 原文地址 ...

  7. Java——集合框架之ArrayList,LinkedList,迭代器Iterator

    概述--集合框架 Java语言的设计者对常用的数据结构和算法做了一些规范(接口)和实现(具体实现接口的类).所有抽象出来的数据结构和操作(算法)统称为Java集合框架(Java Collection ...

  8. 远程url文件地址转成byte

    public static byte[] urlTobyte(String url) throws MalformedURLException { URL ur = new URL(url); Buf ...

  9. 用hyper-v创建虚拟机

    1.新建虚拟机 1) 2) 3) 4)一般情况:linux选择第一代,Windows选择第二代 5) 6) 7) 8) 9) 10) 11)网卡设置:如果虚拟机和宿主机公用一块网卡,那么VLAN ID ...

  10. 网际互连__OSI七层模型

    概述 OSI(Open System Interconnection,开放系统互连)七层网络模型称为开放式系统互联参考模型 ,是一个逻辑上的定义.一个规范.它把网络从逻辑上分为了7层.每一层都有相关. ...