如何使用Javascript检测浏览器字体大小变化

技术频道 - js技术

如何使用Javascript检测浏览器字体大小变化

作者:admin 时间:2023-3-30 20:20:2 浏览:

本文介绍如何使用Javascript检测浏览器字体大小变化。

检测浏览器字体大小变化的用处

为什么要检测浏览器字体大小变化？可能的选项包括：

当字体太大时，将水平菜单栏变成垂直的单个列表。
用大字体替换图形按钮。
根据字体大小对文档应用不同的样式表。你还可以在某个阶段自动切换到缩放布局。
达到一定大小时删除元素。
当达到特定大小时显示更多元素（以防用户缩小而不是放大）。
当屏幕空间允许更长的文本时，通过 Ajax 拉入更长的文本段落。
当字体大小更改以保持一致的行长度时，增加侧边栏的宽度。
在屏幕上将以 em 定义的元素居中。

如何检测字体大小变化

检测字体大小的变化非常容易，你只需要用到一个JavaScript脚本文件：textresizedetector.js，然后添加几行代码即可：

创建一个内部有空间的隐藏元素span，
读取该元素的高度并存储它，
注册侦听器函数以在字体大小更改时调用，并且
定期检查span元素的高度是否发生变化——这意味着用户已经调整了字体大小。

本质上，使用自定义事件意味着每次字体大小发生变化时你都会收到通知。

下面演示实际效果。（调整浏览器中的字体大小以获取通知。）

demo download

使用文本调整大小检测器

要实施此脚本，请先将其嵌入到你的head文档中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>Font Resizer Demo</title>
  <script type="text/javascript" src="textresizedetector.js"></script>
</head>
<body>
  <h1>Resize me, now!</h1>
</body>
</html>

接下来，定义两个属性：

元素span的id。
初始化文本调整大小检测器时调用的函数的名称。

它们分别存储在TARGET_ELEMENT_ID和USER_INIT_FUNC的两个参数中。

<script type="text/javascript" src="textresizedetector.js"></script>
<script type="text/javascript">
    // <![CDATA[
    /* 要检查并插入测试SPAN的元素id */
    TextResizeDetector.TARGET_ELEMENT_ID = 'header';
    /* 初始化TextResizeDetector后调用的函数 */
    TextResizeDetector.USER_INIT_FUNC = init;
    // ]]>
</script>

注意：要确定文档正确的基本字体，你存储在TARGET_ELEMENT_ID的元素id，在源顺序中应该相当高，并且不从任何其他元素继承字体大小。这也意味着检测器会尽快运行。

最后，定义你在USER_INIT_FUNC属性中设置的功能。

<script type="text/javascript" src="textresizedetector.js"></script>
  <script type="text/javascript">
    
    function init(){
      var iBase = TextResizeDetector.addEventListener( onFontResize,null );
      alert( "The base font size = " + iBase );
    }
    // 检查和插入控件的元素id
    TextResizeDetector.TARGET_ELEMENT_ID = 'header';
    /*  初始化调用 TextResizeDetector 的函数 */
    TextResizeDetector.USER_INIT_FUNC = init;
    
</script>

init()函数是你使用addEventListener注册侦听器的地方，这可确保你的函数（在本例中是onFontResize()）在更改字体大小时被调用，它还返回基本字体大小，这对Opera和Firefox用户非常有用。

OPERA和Firefox

这些浏览器采用不同的方法来调整大小：它们不是增加字体大小，而是缩放整个文档，包括表单元素和图像。由于这些浏览器不会调整字体大小，因此该事件永远不会触发。但是，该脚本允许你最初读出基本字体大小并帮助你根据该基本大小调整布局。

回到工作

一旦你设置好了所有的东西，你就可以定义你的监听器函数了。

<script type="text/javascript" src="textresizedetector.js"></script>
<script type="text/javascript">
    
    function init(){
       var iBase = TextResizeDetector.addEventListener( »
onFontResize,null );
      alert( "The base font size = " + iBase );
    }
    function onFontResize( e, args ){
      var msg = "\nThe base font size in pixels: " + »
args[0].iBase;
      msg +="\nThe current font size in pixels: " + »
args[0].iSize;
      msg += "\nThe change in pixels from the last  »
size:" + args[0].iDelta;
      alert( msg );
    }
    // 检查和插入控件的元素id
    TextResizeDetector.TARGET_ELEMENT_ID = 'header';
    // 初始化调用 TextResizeDetector 的函数
    TextResizeDetector.USER_INIT_FUNC = init;
    
</script>