javascript检测网页缩放演示代码

news/2024/3/28 21:35:57

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


在网上冲浪,有时在打某个网站时,会提示你的浏览器显示比例不是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.tangninghui.cn.cn/item-83.htm

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

C# Onnx Yolov8 Detect 物体检测

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System…

Git 学习笔记

Git 学习笔记 Git 简介 Git 是一个 开源的分布式版本控制系统。 什么是版本控制&#xff1f; 版本控制是一种记录一个或若干文件内容变化&#xff0c;以便将来查阅特定版本修订情况的系统。 什么是分布式版本控制系统&#xff1f; 介绍分布式版本控制系统前&#xff0c;有…

Python用正则化Lasso、岭回归预测房价、随机森林交叉验证鸢尾花数据可视化2案例|数据分享...

全文链接&#xff1a;https://tecdat.cn/?p33632 机器学习模型的表现不佳通常是由于过度拟合或欠拟合引起的&#xff0c;我们将重点关注客户经常遇到的过拟合情况&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 相关视频 过度拟合是指学习的假设在训练数据上…

【Redis】Lua脚本在Redis中的基本使用及其原子性保证原理

文章目录 背景一、Eval二、EvalSHA三、Redis 对 Lua 脚本的管理3.1 script flush3.2 script exists3.3 script load3.4 script kill 四、Lua在Redis中原子性执行的原理 背景 Lua 本身是一种轻量小巧的脚本语言&#xff0c;在Redis2.6版本开始引入了对Lua脚本的支持。通过在服务…

2023国赛数学建模B题思路分析 - 多波束测线问题

# 1 赛题 B 题 多波束测线问题 单波束测深是利用声波在水中的传播特性来测量水体深度的技术。声波在均匀介质中作匀 速直线传播&#xff0c; 在不同界面上产生反射&#xff0c; 利用这一原理&#xff0c;从测量船换能器垂直向海底发射声波信 号&#xff0c;并记录从声波发射到…

Cadence Allegro如何添加/生成测试点?

Allegro因其功能强大、界面灵活、可适应切换复杂项目的需求&#xff0c;很快成为全球最受欢迎的EDA软件之一&#xff0c;而很多工程师在Allegro软件中添加测试点&#xff0c;这样做的好处是为了进行电路的功能测试和故障诊断&#xff0c;那么如何在Allegro添加/生成测试点&…