|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
如何使用Javascript檢測(cè)瀏覽器字體大小變化
作者:admin 時(shí)間:2023-3-30 20:20:2 瀏覽:本文介紹如何使用Javascript檢測(cè)瀏覽器字體大小變化。
檢測(cè)瀏覽器字體大小變化的用處
為什么要檢測(cè)瀏覽器字體大小變化？可能的選項(xiàng)包括：
- 當(dāng)字體太大時(shí)，將水平菜單欄變成垂直的單個(gè)列表。
- 用大字體替換圖形按鈕。
- 根據(jù)字體大小對(duì)文檔應(yīng)用不同的樣式表。你還可以在某個(gè)階段自動(dòng)切換到縮放布局。
- 達(dá)到一定大小時(shí)刪除元素。
- 當(dāng)達(dá)到特定大小時(shí)顯示更多元素（以防用戶縮小而不是放大）。
- 當(dāng)屏幕空間允許更長(zhǎng)的文本時(shí)，通過(guò) Ajax 拉入更長(zhǎng)的文本段落。
- 當(dāng)字體大小更改以保持一致的行長(zhǎng)度時(shí)，增加側(cè)邊欄的寬度。
- 在屏幕上將以 em 定義的元素居中。
如何檢測(cè)字體大小變化
檢測(cè)字體大小的變化非常容易，你只需要用到一個(gè)JavaScript腳本文件：textresizedetector.js，然后添加幾行代碼即可：
- 創(chuàng)建一個(gè)內(nèi)部有空間的隱藏元素
span， - 讀取該元素的高度并存儲(chǔ)它，
- 注冊(cè)偵聽(tīng)器函數(shù)以在字體大小更改時(shí)調(diào)用，并且
- 定期檢查
span元素的高度是否發(fā)生變化——這意味著用戶已經(jīng)調(diào)整了字體大小。
本質(zhì)上，使用自定義事件意味著每次字體大小發(fā)生變化時(shí)你都會(huì)收到通知。
下面演示實(shí)際效果。（調(diào)整瀏覽器中的字體大小以獲取通知。）
使用文本調(diào)整大小檢測(cè)器
要實(shí)施此腳本，請(qǐng)先將其嵌入到你的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>
接下來(lái)，定義兩個(gè)屬性：
- 元素
span的id。 - 初始化文本調(diào)整大小檢測(cè)器時(shí)調(diào)用的函數(shù)的名稱(chēng)。
它們分別存儲(chǔ)在TARGET_ELEMENT_ID和USER_INIT_FUNC的兩個(gè)參數(shù)中。
<script type="text/javascript" src="textresizedetector.js"></script>
<script type="text/javascript">
// <![CDATA[
/* 要檢查并插入測(cè)試SPAN的元素id */
TextResizeDetector.TARGET_ELEMENT_ID = 'header';
/* 初始化TextResizeDetector后調(diào)用的函數(shù) */
TextResizeDetector.USER_INIT_FUNC = init;
// ]]>
</script>
注意：要確定文檔正確的基本字體，你存儲(chǔ)在TARGET_ELEMENT_ID的元素id，在源順序中應(yīng)該相當(dāng)高，并且不從任何其他元素繼承字體大小。這也意味著檢測(cè)器會(huì)盡快運(yùn)行。
最后，定義你在USER_INIT_FUNC屬性中設(shè)置的功能。
<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';
/* 初始化調(diào)用 TextResizeDetector 的函數(shù) */
TextResizeDetector.USER_INIT_FUNC = init;
</script>
init()函數(shù)是你使用addEventListener注冊(cè)偵聽(tīng)器的地方，這可確保你的函數(shù)（在本例中是onFontResize()）在更改字體大小時(shí)被調(diào)用，它還返回基本字體大小，這對(duì)Opera和Firefox用戶非常有用。
OPERA和Firefox
這些瀏覽器采用不同的方法來(lái)調(diào)整大小：它們不是增加字體大小，而是縮放整個(gè)文檔，包括表單元素和圖像。由于這些瀏覽器不會(huì)調(diào)整字體大小，因此該事件永遠(yuǎn)不會(huì)觸發(fā)。但是，該腳本允許你最初讀出基本字體大小并幫助你根據(jù)該基本大小調(diào)整布局。
回到工作
一旦你設(shè)置好了所有的東西，你就可以定義你的監(jiān)聽(tīng)器函數(shù)了。
<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';
// 初始化調(diào)用 TextResizeDetector 的函數(shù)
TextResizeDetector.USER_INIT_FUNC = init;
</script>
當(dāng)事件觸發(fā)時(shí)，函數(shù)檢索兩個(gè)參數(shù)：textSizeChanged事件的名稱(chēng)和一個(gè)參數(shù)數(shù)組，第一個(gè)參數(shù)是具有以下屬性的對(duì)象：
iBase
文檔加載時(shí)的初始值。
iDelta
上一個(gè)字體大小和新字體大小之間的差異。
iSize
新的字體大小。
所有字體大小均以像素為單位。
TextResizeDetector對(duì)象本身具有三個(gè)方法：
addEventListener()
注冊(cè)你的事件處理程序并返回基本字體大小。如果將對(duì)象作為第二個(gè)參數(shù)傳遞，則處理函數(shù)將在該對(duì)象的范圍內(nèi)執(zhí)行。
stopDetector()
停止檢測(cè)器。
startDetector()
啟動(dòng)檢測(cè)器。stopDetector()僅當(dāng)該方法已事先執(zhí)行時(shí)才需要。
總結(jié)
本文介紹了如何使用Javascript檢測(cè)瀏覽器字體大小變化，代碼很簡(jiǎn)單，只需使用一個(gè)JavaScript腳本文件，添加幾行代碼即可。
相關(guān)文章
- 站長(zhǎng)推薦
