2015年5月1日 星期五

讓 Line 按鈕只在手機+行動裝置顯示

讓 Line 按鈕只在手機+行動裝置顯示

Wayne Fu 0 A+
line-button-mobile-device如果網站有安裝過 Line 按鈕的話,應該會發現只有行動裝置(手機+平板)有作用,而網頁版的 Line 按鈕按下後,只會連結到官網。

前陣子有讀者反應,"能否讓 Line 按鈕只在手機及平板出現,網頁版不要出現?"。的確,如果能這麼做的話是最好,以下就來看看這件事如何進行。



一、Line 按鈕的難題


先說結論,這件事沒有 100% 的完美解決方法,但是有應付 95% 的語法,在新技術尚未出來之前,相信這是可以接受的處理方式。

1. 判斷行動裝置

事情的癥結在於目前不存在一個完整的機制,能夠有效偵測所有的行動裝置。雖然兩大陣營 Android、iOS 可以用語法偵測出來,但由於行動裝置推陳出新,新型號、山寨機不斷產生,終究兩大系統之外的機型,JS 語法不一定能偵測得到。


2. 目前完美解法

唯一能偵測所有行動裝置的方法,就是建立一個資料庫,記錄所有型號,例如這個「mobile-detect.js」。

先說結論,WFU 不認為這是好的解決方案,一方面這個外掛檔案太大(35k),沒什麼必要為了 Line 按鈕這件事而多裝個大外掛;另一方面不斷有新的行動裝置機型,代表你得每個一段時間就到官網檢查 mobile-detect.js 是否有更新,不但麻煩,而且作者也不見得願意這麼勤奮,肯無償花時間來隨時更新資料庫。


3. 最佳解

WFU 認為的最佳解,就是不要追求完美解,捨棄支援少部分行動裝置,讓主流行動裝置能支援就好。如此不但省事,也不必安裝多餘外掛。



二、安裝 Line 按鈕


雖然「Line官網」提供了分享按鈕的安裝語法,不過執行效果不是很好。

請參考這篇「Line 分享按鈕各種行動裝置都相容的語法」,改用調校過的語法,可以在各種行動裝置的執行效果最佳化。



三、判斷行動裝置


1. 判斷行動裝置的語法

根據這篇「What is the best way to detect a mobile device in jQuery?」,以下的語法可以判斷出九成以上的行動裝置,涵蓋了 Andoird/蘋果/黑莓機...等等:

<script>
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// 這裡放入 Line 安裝語法
}
</script>


2. 判斷手機的語法

如果要排除平板,單單判斷出手機裝置的話,Blogger 有個「行動版判斷式」滿好用的。

偷偷看了一下 Blogger 原始碼,研究一下 Google 工程師是怎麼判斷行動裝置的:

var a="indexOf",b="&m=1",e="(^|&)m=",f="?",g="?m=1";function h(){var c=window.location.href,d=c.split(f);switch(d.length){case 1:return c+g;case 2:return 0<=d[1].search(e)?null:c+b;default:return null}}var k=navigator.userAgent;if(-1!=k[a]("Mobile")&&-1!=k[a]("WebKit")&&-1==k[a]("iPad")||-1!=k[a]("Opera Mini")||-1!=k[a]("IEMobile")){var l=h();l&&window.location.replace(l)};
這一段看起來像是天書的內容,跟前面判斷行動裝置的語法沒有差太遠,試著改成以下:

<script>
if( /iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && /(?=.*Mobile)(?=.*WebKit)/i.test(navigator.userAgent)) {
// 這裡放入 Line 安裝語法
}
</script>




四、程式碼安裝方式


1. 通用安裝方式

最簡單、所有網站通用的 Line 按鈕安裝方式,請按以下流程:

使用「三、判斷行動裝置」→「1. 判斷行動裝置的語法」的程式碼
將 "// 這裡放入 Line 安裝語法" 這些字串,改成「Line 分享按鈕各種行動裝置都相容的語法」裡的程式碼 D~I 行即可。


2. Blogger 安裝方式

Blogger 由於網頁版跟行動版範本不同,也許讀者對於 Line 按鈕,在網頁版與行動版想要擺放的位置並不一樣,那麼就得利用判斷式分別設定了。

例如手機 Line 按鈕可用以下的程式碼:

<b:if cond='data:blog.isMobile'>
這裡填入通用安裝方式的程式碼
</b:if>


平板 Line 按鈕可用以下的程式碼:

<b:if cond='!data:blog.isMobile'>
這裡填入通用安裝方式的程式碼
</b:if>


附個圖記錄一下調整後的效果,這是網頁版的擺設:

line-button-web


這是行動版(手機)上的模擬效果:

line-button-mobile


Line 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP