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

相关文章
|
17天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
116 58
|
22天前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
56 1
|
27天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
198 2
|
30天前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
33 0
|
4天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
14 3
原生js炫酷随机抽奖中奖效果代码
|
3天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
10 2
|
9天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
83 9
|
9天前
|
监控 JavaScript 前端开发
如何检测和解决 JavaScript 中内存泄漏问题
【10月更文挑战第25天】解决内存泄漏问题需要对代码有深入的理解和细致的排查。同时,不断优化和改进代码的结构和逻辑也是预防内存泄漏的重要措施。
28 6
|
26天前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
13 1
【JavaScript】网页交互的灵魂舞者