当前位置: 开发笔记 > 前端 > 正文

浏览器缩放检测的js代码

作者：hang | 来源：互联网 | 2022-03-11 12:13

这篇文章主要介绍了浏览器缩放检测的js代码,需要的朋友可以参考下

测试代码

http://jsbin.com/dipijeqi/11

效果：

chrome

代码如下:

window.devicePixelRatio : 2  (准确)

screen.deviceXDPI / screen.logicalXDPI : NaN

window.outerWidth / window.innerWidth : 2

document.documentElement.offsetHeight / window.innerHeight : 0.020618556701030927 (有相关性)

window.top.outerWidth / window.top.innerWidth : 2

代码如下:

window.devicePixelRatio : 1.5 (准确)

screen.deviceXDPI / screen.logicalXDPI : NaN

window.outerWidth / window.innerWidth : 1.0114583333333333

document.documentElement.offsetHeight / window.innerHeight : 0.023391812865497075  (有相关性)

window.top.outerWidth / window.top.innerWidth : 1.0114583333333333

ie 8

代码如下:

window.devicePixelRatio : undefined

screen.deviceXDPI / screen.logicalXDPI : 1.5416666666666667 (大致准确)

window.outerWidth / window.innerWidth : NaN

document.documentElement.offsetHeight / window.innerHeight : NaN

window.top.outerWidth / window.top.innerWidth : NaN

ie11

代码如下:

window.devicePixelRatio : 1.5 (准确)

screen.deviceXDPI / screen.logicalXDPI : 1.5

window.outerWidth / window.innerWidth : 1.0084033613445377

document.documentElement.offsetHeight / window.innerHeight : 0.02203856749311295 (有相关性)

window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

ie10

代码如下:

window.devicePixelRatio : undefined

screen.deviceXDPI / screen.logicalXDPI : 1.5 (准确)

window.outerWidth / window.innerWidth : 1.0084033613445377

document.documentElement.offsetHeight / window.innerHeight : 1

window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

ie9

代码如下:

window.devicePixelRatio : undefined

screen.deviceXDPI / screen.logicalXDPI : 1.5 (准确)

window.outerWidth / window.innerWidth : 1.0084033613445377

document.documentElement.offsetHeight / window.innerHeight : 1

window.top.outerWidth / window.top.innerWidth : 1.0084033613445377

360 6.3(完全没反应)

代码如下:

window.devicePixelRatio : undefined

screen.deviceXDPI / screen.logicalXDPI : 1

window.outerWidth / window.innerWidth : NaN

document.documentElement.offsetHeight / window.innerHeight : NaN

window.top.outerWidth / window.top.innerWidth : NaN

360极速浏览器

代码如下:

window.devicePixelRatio : 1

screen.deviceXDPI / screen.logicalXDPI : NaN

window.outerWidth / window.innerWidth : 1.5

document.documentElement.offsetHeight / window.innerHeight : 0.015267175572519083

window.top.outerWidth / window.top.innerWidth : 1.5(准确)

搜狗高速浏览器 (完全没反应)

代码如下:

window.devicePixelRatio : undefined

screen.deviceXDPI / screen.logicalXDPI : 1

window.outerWidth / window.innerWidth : NaN

document.documentElement.offsetHeight / window.innerHeight : NaN

window.top.outerWidth / window.top.innerWidth : NaN

淘宝浏览器

代码如下:

window.devicePixelRatio : 1

screen.deviceXDPI / screen.logicalXDPI : NaN

window.outerWidth / window.innerWidth : 2.0710059171597632  (大致准确)

document.documentElement.offsetHeight / window.innerHeight : 0.022988505747126436

window.top.outerWidth / window.top.innerWidth : 2.0710059171597632

chrome

推荐阅读

json
使用内置 Inspector 和 Chrome 调试 Node.js 应用

自 Node.js 6.3 版本起，调试功能已内置在核心模块中，无需额外安装 node-inspector 等工具。通过简单的命令即可启动调试模式，并利用 Chrome 浏览器进行高效的代码调试。 ... [详细]

蜡笔小新 2024-12-23 17:59:40
css
解决Selenium浏览器实例化位置导致的闪退问题

本文探讨了在使用Selenium进行自动化测试时，由于webdriver对象实例化位置不同而导致浏览器闪退的问题，并提供了详细的代码示例和解决方案。 ... [详细]

蜡笔小新 2024-12-23 16:09:49
css
Python自动化测试入门：Selenium环境搭建

本文详细介绍如何在Python环境中安装和配置Selenium，包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外，还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]

蜡笔小新 2024-12-21 10:48:56
css
CSS选择器与XPath在Selenium中的元素定位对比

本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣，并提供了具体的代码示例，帮助读者理解两者在不同场景下的适用性。 ... [详细]

蜡笔小新 2024-12-21 08:56:18
firefox
HTML5与JavaScript实现本地文件读取、写入及路径获取

本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作，并介绍了获取本地文件路径的方法。HTML5提供了一系列API，使得这些操作变得更加简便和安全。 ... [详细]

蜡笔小新 2024-12-20 18:36:06
css
Vue 开发与调试工具指南

本文介绍了如何使用 Vue 调试工具，包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]

蜡笔小新 2024-12-20 16:28:04
css
一个登陆界面

预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]

蜡笔小新 2024-12-20 09:57:07
chrome
如何在设置密码的情况下查看易语言源码？

本文介绍了使用不同工具和方法来查看设置了密码保护的易语言源码的方法。不仅限于特定浏览器，还提供了使用Chrome等主流浏览器的解决方案。 ... [详细]

蜡笔小新 2024-12-19 18:32:42
view
Spring MVC 中 JSP 页面无法正确显示循环数据

探讨了在 Spring MVC 框架下，JSP 页面使用标签时遇到的数据无法正确显示的问题，并提供了可能的原因和解决方案。 ... [详细]

蜡笔小新 2024-12-19 14:45:39
css
JavaScript中style、currentStyle、getComputedStyle及getBoundingClientRect的使用与区别

本文详细探讨了JavaScript中四种获取CSS样式的不同方法：style、currentStyle、getComputedStyle和getBoundingClientRect。每种方法的适用场景及其兼容性问题，并提供了解决方案。 ... [详细]

蜡笔小新 2024-12-18 19:27:53
json
AngularJS在IE7中的兼容性解决方案

本文探讨了在较旧版本的Internet Explorer（如IE7）中使用AngularJS时遇到的问题及解决方法，包括HTML标签的正确书写方式以及如何添加对JSON的支持。 ... [详细]

蜡笔小新 2024-12-16 13:05:07
chrome
2015款Chromebook Pixel评测：高端Chrome OS笔记本体验

在笔记本电脑领域，Chromebook Pixel凭借其精致的铝合金外壳、细腻的显示屏和舒适的键盘，成为了外观设计的佼佼者。然而，尽管外观出众，它是否值得购买仍需考量。 ... [详细]

蜡笔小新 2024-12-15 16:12:50
cookies
Selenium Java Session Management

本文介绍如何确保浏览器驱动与浏览器版本兼容，并详细说明在成功调用浏览器后如何创建和管理Session。同时，提供了一些常用的Selenium定位元素的方法。 ... [详细]

蜡笔小新 2024-12-15 09:51:01
view
Selenium与Python结合实现网页滚动条的自动化控制

本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条，包括垂直和水平滚动条的控制，以及特定元素的聚焦技术。 ... [详细]

蜡笔小新 2024-12-14 14:25:02
css
Web App vs Native App：未来的移动应用趋势

随着移动互联网的发展，Web App和Native App之间的竞争日益激烈。对于开发者而言，选择哪一种技术路径更为明智？本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细]

蜡笔小新 2024-12-13 13:50:17

hang

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章