javascript检测网页缩放演示代码

一、为什么会提示浏览器显示比例不正常?


在网上冲浪,有时在打某个网站时,会提示你的浏览器显示比例不是100%,建议你将浏览器显示比例恢复为100%,以便获得最佳显示效果。

二、检测网页缩放比例的方法


那么这些网站是如何检测你的浏览器显示比例的呢?

(一)window.devicePixelRatio


一般可以使用window.devicePixelRatio来检测。 window.devicePixelRatio当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率,当其值为1时缩放率就是100%,如果其值小于1表示当前网页缩小显示了,如果其值天大于1表示当前网页放大显示了。所以利用该属性可以用于检测网页是否被缩放了。

(二)window.outerWidth/window.innerWidth

如果当前使用的浏览器不支持window.devicePixelRatio,那么我们可以使用window.outerWidth/window.innerWidth来测算,其中:window.outerWidth的值为浏览器窗口的外部宽度,包括所有界面元素(如工具栏/滚动条),而window.innerWidth的值为窗口内容区域的宽度,包括垂直滚动条(如果呈现的话)。

(三)screen.deviceXDPI/screen.logicalXDPI

对于IE浏览器来说,还可以使用screen.deviceXDPI/screen.logicalXDPI来测算。其中screen.deviceXDPI代表显示屏幕的每英寸实际水平点数,screen.logicalXDPI代表显示屏幕每英寸水平常规点数。

综上,我们可以编写一个函数来返回当前网页显示比例:

//功  能:取当前网页显示比例
//返回值:当前网页显示比例,若未能获取有关数据,将返回0
//更  新:20230914创建
function getScrRatio()
{//(window.devicePixelRatio:当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率if(window.devicePixelRatio !== undefined){return window.devicePixelRatio;    }//window.outerWidth:浏览器窗口的外部宽度,包括所有界面元素(如工具栏/滚动条)//window.innerWidth:窗口内容区域的宽度,包括垂直滚动条(如果呈现的话)if(window.outerWidth !== undefined && window.innerWidth !== undefined){return window.outerWidth/window.innerWidth;}if(~navigator.userAgent.toLowerCase().indexOf('msie')){//(IE提供)screen.deviceXDPI:显示屏幕的每英寸实际水平点数//(IE提供)screen.logicalXDPI:显示屏幕每英寸水平常规点数if(screen.deviceXDPI && screen.logicalXDPI){return screen.deviceXDPI/screen.logicalXDPI;        }}return 0;
} //getScrRatio()


三、演示代码


我们在网页上放“显示数据”和“停止显示”两个按钮。其中“停止显示”按钮初始为禁用状态。

当我们点击“显示数据”按钮,就定时采集和显示window.devicePixelRatio、window.outerWidth、window.innerWidth、screen.deviceXDPI/screen.logicalXDPI的值,并将“停止显示”按钮改为可用状态。

当我们点击“停止显示”按钮,就停止更新数据,并将“停止显示”按钮恢复为禁用状态。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content="PurpleEndurer"><meta name="Keywords" content="屏幕缩放比"><meta name="Description" content="屏幕缩放"><title>屏幕缩放比</title></head><body><button onclick="showDataTiming()">显示数据</button>  <button id="btnStopShow" onclick="stopShow()">停止显示</button><p>浏览器类型:
<script>document.write(navigator.userAgent);
</script></p><p>devicePixelRatio:<span id="spanDevPR"></span></p><p>window.outerWidth:<span id="spanWinOW"></span>  window.innerWidth:<span id="spanWinIW"></span></p><p>window.screen.deviceXDPI:<span id="spanDevXDPI"></span>  window.screen.logicalXDPI:<span id="spanlogXDPI"></span></p><p>屏幕缩放比:<span id="spanScrRadio"></span><p>
<script type="text/javascript">
var btnStopShow = document.getElementById("btnStopShow");
btnStopShow.disabled=true;
var spanDevPR = document.getElementById("spanDevPR");
var spanWinOW = document.getElementById("spanWinOW");
var spanWinIW = document.getElementById("spanWinIW");
var spanDevXDPI = document.getElementById("spanDevXDPI");
var spanlogXDPI = document.getElementById("spanlogXDPI");
var spanScrRadio =  document.getElementById("spanScrRadio");
var t = 0;//定时器//功  能:取当前网页显示比例
//返回值:当前网页显示比例,若未能获取有关数据,将返回0
//更  新:20230914创建
function getScrRatio()
{//(window.devicePixelRatio:当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率if(window.devicePixelRatio !== undefined){return window.devicePixelRatio;    }//window.outerWidth:浏览器窗口的外部宽度,包括所有界面元素(如工具栏/滚动条)//window.innerWidth:窗口内容区域的宽度,包括垂直滚动条(如果呈现的话)if(window.outerWidth !== undefined && window.innerWidth !== undefined){return window.outerWidth/window.innerWidth;}if(~navigator.userAgent.toLowerCase().indexOf('msie')){//(IE提供)screen.deviceXDPI:显示屏幕的每英寸实际水平点数//(IE提供)screen.logicalXDPI:显示屏幕每英寸水平常规点数if(screen.deviceXDPI && screen.logicalXDPI){return screen.deviceXDPI/screen.logicalXDPI;        }}return 0;
} //getScrRatio()function showData()
{if(undefined != window.devicePixelRatio){spanDevPR.innerText = window.devicePixelRatio;    }if (undefined != window.outerWidth){spanWinOW.innerText = window.outerWidth;}if (undefined != window.innerWidth){spanWinIW.innerText = window.innerWidth;}if (undefined != screen.deviceXDPI){spanDevXDPI.innerText = screen.deviceXDPI;}if (undefined != screen.logicalXDPI){spanlogXDPI.innerText = screen.logicalXDPI;}var scrRatio = getScrRatio();if (scrRatio){spanScrRadio.innerText = Math.round(scrRatio*100); }
}//showData()function showDataTiming()
{t = self.setInterval("showData()",500);btnStopShow.disabled = false;
}//showDataTiming()function stopShow()
{t = window.clearInterval(t);btnStopShow.disabled = true;
}//stopShow()</script></body>
</html>

四、代码运行效果


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/79730.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于MSP430 红外避障-遥控小车(电赛必备 附项目代码)

文章目录 一、硬件清单二、模块连接三、程序设计四、项目源码 项目环境&#xff1a; 1. MSP430F55292. Code Composer Studio3. 蓝牙调试助手 项目简介&#xff1a; 小车可分为3种工作模式&#xff0c;每种工作模式都会打印在OLED显示屏上&#xff0c;通过按键转换工作模式。 模…

代码随想录算法训练营Day46 | 动态规划(8/17) 1.练习题 LeetCode 139.单词拆分 2.多重背包 3. 背包问题总结篇!

背包问题要结束了&#xff01;首先是今天的练习题&#xff0c;然后是多重背包的知识点&#xff0c;最后对这几天背包问题做一个总结&#xff01; 1. 练习题 139. Word Break Given a string s and a dictionary of strings wordDict, return true if s can be segmented into…

单例模式,适用于对象唯一的情景(设计模式与开发实践 P4)

文章目录 单例模式实现代理单例惰性单例 上一章后续的内容是关于 JS 函数闭包的&#xff0c;考虑很多读者已经有了闭包基础或者希望通过实战理解&#xff0c;遂跳过上一章直接开始设计模式篇&#xff5e; 需要注意的是&#xff0c;代码部分仅供参考&#xff0c;主要关注的内容是…

752. 打开转盘锁

链接&#xff1a; 752. 打开转盘锁 题解&#xff1a; class Solution { public:int openLock(vector<string>& deadends, string target) {std::unordered_set<std::string> table(deadends.begin(), deadends.end());if (table.find("0000") ! t…

华为云云服务器云耀L实例评测 | 华为云云服务器实例新品全面解析

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

零基础学前端(四)重点讲解 CSS

1. 该篇适用于从零基础学习前端的小白 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码&#xff0c;以身体感悟带动头脑去理解新知识 3. 初学者切忌&#xff0c;不要眼花缭乱&#xff0c;不要四处找其它文档&#xff0c;要坚定一个教授者的方式&#xff0c;将其学通透&#xff…

【数据结构】串的模式匹配:简单的模式匹配算法,KMP算法

欢~迎~光~临~^_^ 目录 知识树 1、什么是串的模式匹配 2、简单的模式匹配算法 3、KMP算法 3.1 算法原理 3.2 C语言实现KMP算法 3.3 求next数组 3.4 KMP算法优化&#xff08;对next数组的优化&#xff09; 知识树 1、什么是串的模式匹配 串的模式匹配是在一个字符串中…

vscode和HBuilderx设置快捷键注释

一、vscode设置快捷键注释 1.打开vscode&#xff0c;使用快捷键&#xff1a;ctrlshiftp mac的话快捷键是&#xff1a;commandshiftp 然后在行中输入snippets 2.选择“新建”&#xff0c;选择将要配置的文件类型&#xff08;以vue类型为例&#xff09;我这里创建的名字为vue.…

编译原生安卓aosp源码,实现硬改以及定位

系列文章目录 第一章 安卓aosp源码编译环境搭建 第二章 手机硬件参数介绍和校验算法 第三章 修改安卓aosp代码更改硬件参数 第四章 编译定制rom并刷机实现硬改(一) 第五章 编译定制rom并刷机实现硬改(二) 第六章 不root不magisk不xposed lsposed frida原生修改定位 第七章 安卓…

sentinel实现对openfeign保护

引入依赖<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId> </dependency>yml添加配置feign:sentinel:enabled: true编写feign接口并配置fallback属性FeignClient(value …

Python xlwings打开excel表格进行最大化

使用xlwings打开Excel表并最大化窗口 在Python中&#xff0c;xlwings是一个强大的库&#xff0c;它可以与Excel交互&#xff0c;使你能够使用Python操作Excel表格。有时&#xff0c;我们可能需要在打开Excel表格时将窗口最大化&#xff0c;以便更好地进行数据分析和处理。 本文…

阶段性总结:跨时钟域同步处理

对时序图与Verilog语言之间的转化的认识&#xff1a; 首先明确工程要实现一个什么功能&#xff1b;用到的硬件实现一个什么功能。 要很明确这个硬件的工作时序&#xff0c;即&#xff1a;用什么样的信号&#xff0c;什么变化规则的信号去驱动这个硬件。 然后对工程进行模块划…

使用docker创建minio镜像并上传文件,提供demo

使用docker创建minio镜像并上传文件&#xff0c;提供demo 1. 整体描述2. 环境搭建2.1 windows环境搭建2.2 docker部署 3. spring集成3.1 添加依赖3.2 配置文件3.3 创建config类3.4 创建minio操作类3.5 创建启动类3.6 测试controller 4. 测试操作4.1 demo运行4.2 页面查看4.3 上…

debian下快速搭建php环境并验证

目录 安装 验证 安装 更新软件包&#xff1a; sudo apt update 升级软件包&#xff1a; sudo apt upgrade 安装 sudo apt-get install php7.3 php7.3-fpm php7.3-mysql php7.3-redis php7.3-cli php7.3-curl php7.3-json php7.3-mbstring php7.3-opcache php7.3-readli…

【云计算】虚拟私有网络 VPC

虚拟私有网络 VPC 1.VPC 简介1.1 VPC 相关基本概念1.2 其他相关基本概念 2.VPC 通信场景2.1 VPC 内部互通2.2 VPC 间互通2.2.1 对等连接2.2.2 Transit Gateway 或者云联网 2.3 访问 Internet2.3.1 Internet 网关2.3.2 NAT 网关 2.4 访问本地网络2.4.1 VPN 连接2.4.2 专线接入2.…

pytorch生成CAM热力图-单张图像

利用ImageNet预训练模型生成CAM热力图-单张图像 一、环境搭建二、主要代码三、结果展示 代码和图片等资源均来源于哔哩哔哩up主&#xff1a;同济子豪兄 讲解视频&#xff1a;CAM可解释性分析-算法讲解 一、环境搭建 1&#xff0c;安装所需的包 pip install numpy pandas mat…

原生微信小程序中进行 API 请求

原生微信小程序中进行 API 请求 当在原生微信小程序中进行 API 请求时&#xff0c;封装请求可以提高代码的可维护性和可扩展性。在本篇博客中&#xff0c;我们将一步步介绍如何进一步封装请求&#xff0c;并添加请求超时、拦截器和请求取消功能。 第一步&#xff1a;基本请求封…

混淆矩阵细致理解

1、什么是混淆矩阵 混淆矩阵&#xff08;Confusion Matrix&#xff09;是深度学习和机器学习领域中的一个重要工具&#xff0c;用于评估分类模型的性能。它提供了一个清晰的视觉方式来展示模型的预测结果与真实标签之间的关系&#xff0c;尤其在分类任务中&#xff0c;帮助我们…

【Unity基础】2.网格材质贴图与资源打包

【Unity基础】2.网格材质贴图与资源打包 大家好&#xff0c;我是Lampard~~ 欢迎来到Unity基础系列博客&#xff0c;所学知识来自B站阿发老师~感谢 &#xff08;一&#xff09;网格材质纹理 第一次接触3D物体的话&#xff0c;会觉得好神奇啊&#xff0c;这个物体究竟是由什么组…

[python 刷题] 217 Contains Duplicate

[python 刷题] 217 Contains Duplicate 题目&#xff1a; Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct. 一道非常简单的入门题&#xff0c;新建一个 set 去保存所有的值&…