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

浏览器缩放检测的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

推荐阅读

chrome
如何在IE11中启用Edge模式？详细设置指南

Edge模式是IE11的一项重要更新，旨在提升浏览器的兼容性和互操作性。该模式允许用户以更高标准的Web技术访问网页，类似于WP8.1 GDR1中的IE11特性。 ... [详细]

蜡笔小新 2024-11-14 12:30:51
上传
微信平台上的HTML5游戏开发心得

近期，微信公众平台上的HTML5游戏引起了广泛讨论，预示着HTML5游戏将迎来新的发展机遇。磊友科技的赵霏，作为一名HTML5技术的倡导者，分享了他在微信平台上开发HTML5游戏的经验和见解。 ... [详细]

蜡笔小新 2024-11-13 16:56:47
chrome
Webdriver中元素定位的多种技术与策略

在Webdriver中，元素定位是自动化测试的关键环节。本文详细介绍了8种常用的元素定位技术与策略，包括ID、名称、标签名、类名、链接文本、部分链接文本、XPath和CSS选择器。每种方法都有其独特的优势和适用场景，通过合理选择和组合使用，可以显著提高测试脚本的稳定性和效率。此外，文章还探讨了在复杂页面结构中如何灵活运用这些定位技术，以应对各种挑战。 ... [详细]

蜡笔小新 2024-11-11 11:34:38
chrome
当前笔记本更新换代速度如何？Windows 7逐渐退出历史舞台

当前笔记本更新换代速度如何？Windows 7逐渐退出历史舞台 ... [详细]

蜡笔小新 2024-11-10 14:57:34
chrome
【Eclipse开发效率提升插件推荐】利用Google V8增强Node.js调试体验

在Eclipse中提升开发效率，推荐使用Google V8插件以增强Node.js的调试体验。安装方法有两种：一是通过Eclipse Marketplace搜索并安装；二是通过“Help”菜单中的“Install New Software”，在名称栏输入“googleV8”。此插件能够显著改善调试过程中的性能和响应速度，提高开发者的生产力。 ... [详细]

蜡笔小新 2024-11-10 09:44:34
chrome
Win10 S系统与Chrome浏览器兼容性问题分析

2017年5月2日，微软在美国推出了最新的Windows 10 S操作系统，专为教育领域设计，旨在为教师和学生提供一系列高效的产品和服务。该系统的最大特点是其简洁的设计和快速的响应速度，然而在与某些应用的兼容性方面，特别是Chrome浏览器，仍存在一些问题。本文将深入分析这些兼容性问题，并探讨可能的解决方案。 ... [详细]

蜡笔小新 2024-11-09 23:50:49
chrome
Ave V8 JavaScript 引擎：持续优化与创新

V8不仅是一款著名的八缸发动机，广泛应用于道奇Charger、宾利Continental GT和BossHoss摩托车中。自2008年以来，作为Chromium项目的一部分，V8 JavaScript引擎在性能优化和技术创新方面取得了显著进展。该引擎通过先进的编译技术和高效的垃圾回收机制，显著提升了JavaScript的执行效率，为现代Web应用提供了强大的支持。持续的优化和创新使得V8在处理复杂计算和大规模数据时表现更加出色，成为众多开发者和企业的首选。 ... [详细]

蜡笔小新 2024-11-09 15:56:40
chrome
使用 Firefox Developer Edition 70.0 数日后，体验令人满意

使用 Firefox Developer Edition 70.0 数日后，体验令人满意 ... [详细]

蜡笔小新 2024-11-09 12:33:59
postman
利用爬虫技术抓取数据，结合Fiddler与Postman在Chrome中的应用优化提交流程

本文探讨了如何利用爬虫技术抓取目标网站的数据，并结合Fiddler和Postman工具在Chrome浏览器中的应用，优化数据提交流程。通过详细的抓包分析和模拟提交，有效提升了数据抓取的效率和准确性。此外，文章还介绍了如何使用这些工具进行调试和优化，为开发者提供了实用的操作指南。 ... [详细]

蜡笔小新 2024-11-09 09:05:16
json
如何在PHP中计算腾讯云接口签名，实现人脸核身接口的对接与签名配置

在PHP中实现腾讯云接口签名，以完成人脸核身功能的对接与签名配置时，需要注意将文档中的POST请求改为GET请求。具体步骤包括：使用你的`secretKey`生成签名字符串`$srcStr`，格式为`GET faceid.tencentcloudapi.com?`，确保参数正确拼接，避免因请求方法错误导致的签名问题。此外，还需关注API的其他参数要求，确保请求的完整性和安全性。 ... [详细]

蜡笔小新 2024-11-08 21:58:28
chrome
C++ 开发实战：实用技巧与经验分享

C++ 开发实战：实用技巧与经验分享 ... [详细]

蜡笔小新 2024-11-07 20:31:03
chrome
Vue 开发入门：环境配置与初步搭建

本文介绍了 Vue 开发的入门指南，重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE，其下载地址为。安装时请选择适合您操作系统的版本，并通过获取激活码。WebStorm 是前端开发者的理想选择，提供了丰富的功能和强大的代码编辑能力。 ... [详细]

蜡笔小新 2024-11-07 15:02:54
label
技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告

技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]

蜡笔小新 2024-11-07 14:33:19
hover
每日前端实战：148# 视频教程展示纯 CSS 实现按钮两侧滑入装饰元素的悬停效果

通过点击页面右侧的“预览”按钮，您可以直接在当前页面查看效果，或点击链接进入全屏预览模式。该视频教程展示了如何使用纯 CSS 实现按钮两侧滑入装饰元素的悬停效果。视频内容具有互动性，观众可以实时调整代码并观察变化。访问以下链接体验完整效果：https://codepen.io/comehope/pen/yRyOZr。 ... [详细]

蜡笔小新 2024-11-07 14:24:29
view
深入解析Ajax的工作机制及其在现代Web开发中的应用

本文深入探讨了Ajax的工作机制及其在现代Web开发中的应用。Ajax作为一种异步通信技术，改变了传统的客户端与服务器直接交互的模式。通过引入Ajax，客户端与服务器之间的通信变得更加高效和灵活。文章详细分析了Ajax的核心原理，包括XMLHttpRequest对象的使用、数据传输格式（如JSON和XML）以及事件处理机制。此外，还介绍了Ajax在提升用户体验、实现动态页面更新等方面的具体应用，并讨论了其在当前Web开发中的重要性和未来发展趋势。 ... [详细]

蜡笔小新 2024-11-07 14:11:10

hang

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

Tags | 热门标签

RankList | 热门文章