• 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代表显示屏幕每英寸水平常规点数。

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

    1. //功  能：取当前网页显示比例
    2. //返回值：当前网页显示比例，若未能获取有关数据，将返回0
    3. //更  新：20230914创建
    4. function getScrRatio()
    5. {
    6.     //(window.devicePixelRatio:当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率
    7.     if(window.devicePixelRatio !== undefined)
    8.     {
    9.         return window.devicePixelRatio;    
    10.     }
    11.  
    12.     //window.outerWidth:浏览器窗口的外部宽度，包括所有界面元素（如工具栏/滚动条）
    13.     //window.innerWidth:窗口内容区域的宽度,包括垂直滚动条（如果呈现的话）
    14.     if(window.outerWidth !== undefined && window.innerWidth !== undefined)
    15.     {
    16.         return window.outerWidth/window.innerWidth;
    17.     }
    18.  
    19.     if(~navigator.userAgent.toLowerCase().indexOf('msie'))
    20.     {
    21.         //（IE提供）screen.deviceXDPI：显示屏幕的每英寸实际水平点数
    22.         //（IE提供）screen.logicalXDPI：显示屏幕每英寸水平常规点数
    23.         if(screen.deviceXDPI && screen.logicalXDPI)
    24.         {
    25.             return screen.deviceXDPI/screen.logicalXDPI;        
    26.         }
    27.     }
    28.  
    29.     return 0;
    30. } //getScrRatio()


    三、演示代码


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

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

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

    1. html>
    2. <html>
    3.  <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="Generator" content="EditPlus®">
    6.   <meta name="Author" content="PurpleEndurer">
    7.   <meta name="Keywords" content="屏幕缩放比">
    8.   <meta name="Description" content="屏幕缩放">
    9.   <title>屏幕缩放比title>
    10.  head>
    11.  <body>
    12.  <button onclick="showDataTiming()">显示数据button>  <button id="btnStopShow" onclick="stopShow()">停止显示button>
    13.  <p>
    14.     浏览器类型：
    15. <script>
    16.     document.write(navigator.userAgent);
    17. script>
    18.  p>
    19.  
    20.  <p>
    21.     devicePixelRatio：<span id="spanDevPR">span>
    22.  p>
    23.  <p>
    24.     window.outerWidth：<span id="spanWinOW">span>  
    25.     window.innerWidth：<span id="spanWinIW">span>
    26.  p>
    27.  <p>
    28.      window.screen.deviceXDPI：<span id="spanDevXDPI">span>  
    29.     window.screen.logicalXDPI：<span id="spanlogXDPI">span>
    30.  p>
    31.  <p>
    32.     屏幕缩放比：<span id="spanScrRadio">span>
    33.  <p>
    34. <script type="text/javascript">
    35. var btnStopShow = document.getElementById("btnStopShow");
    36. btnStopShow.disabled=true;
    37. var spanDevPR = document.getElementById("spanDevPR");
    38. var spanWinOW = document.getElementById("spanWinOW");
    39. var spanWinIW = document.getElementById("spanWinIW");
    40. var spanDevXDPI = document.getElementById("spanDevXDPI");
    41. var spanlogXDPI = document.getElementById("spanlogXDPI");
    42. var spanScrRadio =  document.getElementById("spanScrRadio");
    43. var t = 0;//定时器
    44.  
    45. //功  能：取当前网页显示比例
    46. //返回值：当前网页显示比例，若未能获取有关数据，将返回0
    47. //更  新：20230914创建
    48. function getScrRatio()
    49. {
    50.     //(window.devicePixelRatio:当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率
    51.     if(window.devicePixelRatio !== undefined)
    52.     {
    53.         return window.devicePixelRatio;    
    54.     }
    55.  
    56.     //window.outerWidth:浏览器窗口的外部宽度，包括所有界面元素（如工具栏/滚动条）
    57.     //window.innerWidth:窗口内容区域的宽度,包括垂直滚动条（如果呈现的话）
    58.     if(window.outerWidth !== undefined && window.innerWidth !== undefined)
    59.     {
    60.         return window.outerWidth/window.innerWidth;
    61.     }
    62.  
    63.     if(~navigator.userAgent.toLowerCase().indexOf('msie'))
    64.     {
    65.         //（IE提供）screen.deviceXDPI：显示屏幕的每英寸实际水平点数
    66.         //（IE提供）screen.logicalXDPI：显示屏幕每英寸水平常规点数
    67.         if(screen.deviceXDPI && screen.logicalXDPI)
    68.         {
    69.             return screen.deviceXDPI/screen.logicalXDPI;        
    70.         }
    71.     }
    72.  
    73.     return 0;
    74. } //getScrRatio()
    75.  
    76.  
    77. function showData()
    78. {
    79.     if(undefined != window.devicePixelRatio)
    80.     {
    81.         spanDevPR.innerText = window.devicePixelRatio;    
    82.     }
    83.  
    84.  
    85.     if (undefined != window.outerWidth)
    86.     {
    87.         spanWinOW.innerText = window.outerWidth;
    88.     }
    89.  
    90.     if (undefined != window.innerWidth)
    91.     {
    92.         spanWinIW.innerText = window.innerWidth;
    93.     }
    94.  
    95.     if (undefined != screen.deviceXDPI)
    96.     {
    97.         spanDevXDPI.innerText = screen.deviceXDPI;
    98.     }
    99.  
    100.     if (undefined != screen.logicalXDPI)
    101.     {
    102.         spanlogXDPI.innerText = screen.logicalXDPI;
    103.     }
    104.  
    105.      var scrRatio = getScrRatio();
    106.     if (scrRatio)
    107.     {
    108.         spanScrRadio.innerText = Math.round(scrRatio*100); 
    109.     }
    110. }//showData()
    111.  
    112.  
    113. function showDataTiming()
    114. {
    115.     t = self.setInterval("showData()",500);
    116.     btnStopShow.disabled = false;
    117. }//showDataTiming()
    118.  
    119.  
    120. function stopShow()
    121. {
    122.     t = window.clearInterval(t);
    123.     btnStopShow.disabled = true;
    124. }//stopShow()
    125.  
    126. script>
    127.  
    128. body>
    129. html>

    四、代码运行效果


  • 相关阅读:
    heketi管理glusterfs，k8s基于glusterfs创建storageclass
    数据结构（C语言）——双链表
    C++的缺陷和思考（七）
    内存管理下及模板初阶
    python 按字段查询数据库
    PodMan容器技术
    自己编译的micropython esp32s3固件 pin.irq 无反应的天坑
    计算机视觉CV-目标检测OB
    软件工程-从规划、需求（DFD数据流图），到设计、实现和测试
    STM32系列(HAL库)——串口IAP
  • 原文地址：https://blog.csdn.net/Purpleendurer/article/details/132912795