經驗交流

偵測使用者之顯示器解析度，並動態調整字體大小

問題說明
　在製作網頁時，如果要呈現大量文字，我會使用 9pt 大小的字體。不過，當大尺寸顯示器日漸普及之後，使用 1024*768 或更高解析度的使用者也會愈來愈多。在 800*600 的環境下，9pt 的字體還相當清晰；但在 1024*768 的環境下，閱讀如此大小的字體就有點吃力了，我們得改用 12pt 的字。
　因此，可以依照使用者之顯示器解析度高低，而動態調整字體大小嗎？

我的做法〈一〉
　透過 JavaScript 可以取得使用者的顯示器解析度，同時將所得的數值儲存在使用者端（使用 Cookie），我們再利用 PHP 去讀取這個數值，即可調整字體大小。當然，如果使用者關閉瀏覽器的 Cookie 功能的話，這種做法就不適用了，請改用第二做法。
　在首頁中加入這一段 JavaScript：
<script language="JavaScript">
var expiryDate = new Date();
expiryDate.setTime(expiryDate.getTime() + (24*60*60*1000));

function SetCookie(name, value) {
  document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString() + "; path=/";
}

SetCookie("ScrWidth", screen.width, expiryDate);
</script>

　SetCookie 是自定的函數，可將一組變數值以指定的名稱，寫入使用者端的硬碟。而從 screen.width 這個屬性，即可得到我們所要的顯示器寬度。
　當使用者拜訪我們的首頁時，我們已透過上述的語法記錄其顯示器之寬度（名為 ScrWidth，有效期限為 24 小時）；當他再進入站上的其它網頁時，ScrWidth 這個變數會傳入 HTTP server，我們可以使用下列的語法來取得它，並動態調整字體大小：
<?
// 顯示器寬度大於 800 時，使用 12pt 字體，否則改用 9pt
if ( isset($ScrWidth) && $ScrWidth > 800 )
  $FONT_SIZE = 12;
else
  $FONT_SIZE = 9;
?>

<html>
<head>
<title>......</title>
<style>
body {
  font-size : <?echo $FONT_SIZE;?>pt;
}
</style>
</head>
......

　使用者初入首頁時，記錄其 Screen Width；再進入其它網頁時，讀取這個 Screen Width 變數。乍看之下，這似乎相當可行；可是，如果使用者沒自首頁進站，而直接連結其它頁面呢？還有一種可能的狀況：使用者臨時調整其顯示器之解析度。
　為了解決這兩種狀況，我們必須在每個網頁中都重新去偵測其 Screen Width。一旦發現有所變化，就更新 ScrWidth 的值。因此，上述第一段 JavaScript 必須改成下列的寫法：
<script language="JavaScript">
var expiryDate = new Date();
expiryDate.setTime(expiryDate.getTime() + (24*60*60*1000));

function SetCookie(name, value) {
  document.cookie = name + "=" + escape(value) + "; expires=" + expires.toGMTString() + "; path=/";
}

<?
if ( $ScrWidth )
  echo "SW = " . $ScrWidth . ";";
else
  echo "SW = null;";
?>
if ( SW == null || SW != screen.width )
  SetCookie("ScrWidth", screen.width, expiryDate);
</script>

　現在，我已經記下您的 Screen Width 了，您可以試試以下的範例，它能動態改變字體大小。
　看過之後，先別關閉該視窗，試著去調整顯示器的解析度，然後 reload 該範例程式兩次（第一次會重新記錄 Screen Width，第二次才會調整），看看效果如何。

範例 原始碼

我的做法〈二〉
　使用 Cookie 的話，可能會因使用者關閉 Cookie 功能而受限，您可以再試試這種方法：
　在每頁的 <HEAD> 中加入這一段 JavaScript：
<script language="JavaScript">
if ( screen.width > 800 ) {
  document.writeln("<style>");
  document.writeln("body {font-size: 12pt;}");
  document.writeln("</style>");
}
else {
  document.writeln("<style>");
  document.writeln("body {font-size: 9pt;}");
  document.writeln("</style>");
}
</script>

　這種方法係完全仰賴 JavaScript 來作用，與 PHP 無關。

範例 原始碼
經驗交流