javascript检测网页缩放演示代码

简介: 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>

四、代码运行效果

image.png image.png

image.png

相关文章
|
2月前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
126 58
|
2月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
119 1
|
18天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
114 52
|
9天前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
43 15
在 golang 中执行 javascript 代码的方案详解
|
1月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
45 3
原生js炫酷随机抽奖中奖效果代码
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
28 5
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
188 9
|
1月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
1月前
|
监控 JavaScript 前端开发
如何检测和解决 JavaScript 中内存泄漏问题
【10月更文挑战第25天】解决内存泄漏问题需要对代码有深入的理解和细致的排查。同时,不断优化和改进代码的结构和逻辑也是预防内存泄漏的重要措施。
46 6