2013年11月25日

如何依據不同的瀏覽器及版本發佈網站公告

A+
首先感謝 +Pan Kuan 及 +Ken Lo 回報,最近在瀏覽本站文章時可能會出現內容段落異常的情形。依照回報的使用環境分析,很可能是 Chrome 31 這個瀏覽器版本造成的不相容狀況

而如何發佈這個異常情形的公告,除了擺放位置外,也考慮到是否所有人都需要看到這個公告。最後決定不干擾大多數讀者的閱讀版面,只在 "Chrome 31" 這個瀏覽器版本出現公告。

本文的內容便是分享這個實作心得,並延伸一些不同的應用。 以下先描述異常的現象為何,想直接瞭解語法請跳「二、在特定的瀏覽器版本才顯示公告」



一、本站的異常狀況


根據 Pan Kuan 提供的圖片,本站某些文章會出現類似以下的異常狀況──


由於圖檔很大,按下縮圖可看完整畫面,截圖來自這篇「部落格文章+特殊文字區塊(一)安裝與使用的完整解決方案」,文章的段落錯亂地很嚴重。

由於本站的內容很大一部份是程式碼教學,因此文章內容大多會穿插程式碼。會引起段落錯亂的情形很可能是 Chrome 31 對語法的解讀不太一樣。為了測試我也下載了 Chrome 31,果真看到異常現象,以下列出有問題的測試系統環境:

1. Pan:
  • iOS(蘋果移動裝置)
  • Chrome 31

2. Ken:
  • Win7(評價不錯)
  • Chrome 31

3. Wayne:
  • XP(再戰十年)
  • Chrome 31 免安裝版、Opera 18


看來兇手就是 Chrome 31 了(Opera 18 其實就是 Chrome 31,一模一樣的引擎),無論在各種作業系統都一樣。而我在其他的瀏覽器版本,例如 Chrome 28、Opera 15、FireFox、IE,文章都是沒有異狀的。

因此,有看到本篇的讀者,若使用 Chrome 31 而看到不正常的內容,建議暫時先用別的瀏覽器、或比較舊的 Chrome 來瀏覽本站了。我也會盡量找出是什麼語法導致異常,看能否用別的語法來替代。



二、在特定的瀏覽器版本才顯示公告


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 程式碼內容

如果使用了 Chrome 31 瀏覽本站,可發現在每篇文章的文末,會顯示注意事項。這個訊息如何用語法呈現,請參考以下程式碼──


請對照以上程式碼行號:

F~G:紅色字串 chrome 可替換為其他瀏覽器代號,代表偵測到該瀏覽器才顯示公告。請特別注意字串需使用小寫──

  • FireFox:使用 "firefox" 字串
  • IE:使用 "msie" 字串
  • Safari:使用 "safari" 字串
  • Opera:舊版本使用 "opera" 字串;新版本 15 以後需使用 "opr" 字串。


H:藍色字串 31 為版本,代表偵測到瀏覽器該版本才顯示公告,可替換為其他版本數字。

I:橘色字串為公告內容的 HTML 碼。

A、I:兩個綠色字串必須一致,為公告區塊的 id。


2. 程式碼擺放位置

我擺放的位置在文章後面,放在範本中「繼續閱讀」的程式碼後面即可。可參考「Blogger 範本__(三)文章及留言區塊的程式碼」→ 三、文章區塊 → 3. 繼續閱讀。

若想放在其他位置,可參考同一篇文章,或是該系列文章來擺放。



三、應用方式


1. IE 限定

若不限版本、只限定特定瀏覽器,例如偵測到使用者的瀏覽器為 IE 時顯示公告,可參考以下程式碼:

<div id="special_announce"></div>
<script>
//<![CDATA[
(function () {
var info = window.navigator.appVersion.toLowerCase();
if (info.search("msie") > 0) {
document.getElementById("special_announce").innerHTML = "<br/><br/>!! 請注意 !!<br/> 為了得到較佳的顯示效果及閱覽體驗,建議勿使用 IE 來瀏覽網站。";
}
} )();
//]]>
</script>


或是配合偵測瀏覽器版本的程式碼,建議 IE8 以下的瀏覽器升級(原因請見「建議避免使用 IE8(含)以下瀏覽器」)。


2. 不同的瀏覽器顯示不同公告

或許有某些情境,需要依據不同的瀏覽器來顯示不同的公告,那麼「1. IE 限定」的 if 判斷句,可改為以下內容:

if (info.search("msie") > 0) {
document.getElementById("special_announce").innerHTML = "偵測到 IE 時,顯示這一段公告內容";
} else {
document.getElementById("special_announce").innerHTML = "不是 IE 瀏覽器時,顯示這一段公告內容";
}



四、裝飾公告


以上的程式碼,未對公告區塊進行裝修,版面比較不美觀。想要做出與眾不同的公告區塊,需要對 CSS 語法有基本認識,可參考「部落格文章+特殊文字區塊(二)實作範例__公告、修訂區塊」、「Blogger 首頁公佈欄實作」這兩篇文章,來看看區塊的 CSS 如何設定。

有了概念之後,以本文的程式碼為例,在後台範本的 </head> 之前,插入以下語法,即可讓公告區塊變得美觀:

<style>
#special_announce {
在此放入所有 CSS 語法
}
</style>



更多實用工具:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。