2015年12月1日 星期二

讓行動版網頁能用手指縮放螢幕大小

讓行動版網頁能用手指縮放螢幕大小

Wayne Fu 0 A+
這個「Blogger 論壇貼文」表示,"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站,發現的確連 WFU BLOG 也不能做到這件事。

其實在使用平板的時候,由於某些網頁字不夠大,常常需要用兩隻手指將螢幕放大。而手機的螢幕可視範圍更小,如果網頁有圖片的話,"能用手指縮放" 這件事的確能提供讀者友善的使用體驗。

於是研究了一下 Blogger 行動版如何開啟這項功能,其實方法很簡單,請見本文的筆記整理。

(圖片出處: pixabay.com)


一、不同範本的差異


雖然修改的原理很簡單,但由於 Blogger 範本內容事實上不斷地在更新,也可以說是官方持續地在加強範本預設的語法,因此這件事變得稍稍有點難度。如果讀者熟悉範本的語法,那麼可以直接跳到「二、修改範本」;若是不熟悉的話,建議看完這個章節,跟縮放語法相關的所有狀況。

1. 非官方語法

如果非 Blogger 平台的網頁,或是非 Blogger 官方範本,那麼跟縮放相關的語法,可能長得像類似這樣子:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

2. 早期範本語法

不同時期的 Blogger 範本預設內容都不一樣,在後台選擇任一官方範本、並立即套用,你在範本中就可看到最新的預設內容。

在最早的 Blogger 範本,也稱為「傳統範本」,連「1. 非官方語法」這一行都找不到。

進入行動裝置時代後,如果你的 Blogger 是在這個時期建立的,那麼應該會在範本中看到下列的判斷式語法:

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />
<b:else/>
<meta content='width=1100' name='viewport' />
</b:if>


3. 最近一年的語法

今年 Blogger 進一步精簡了判斷式語法,如果你的網站是近幾個月才建立的,那麼範本中應該可找到下列語法:

<meta expr:content='data:blog.isMobile ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot; : &quot;width=1100&quot;' name='viewport' />


二、修改範本


1. 修改原理

雖然上面看到的語法範例都長得不一樣,不過重點只有一個,就是修改官方的預設參數,也就是下面這個字串:

maximum-scale=1.0
  • 這代表 "網頁最大能放大為幾倍",如果把參數改為 5.0 就是最多可用手指放大到 5 倍。
  • 相信 5 倍已經夠用了,如果想更大可以把參數改為 10.0。
  • 同樣的道理,如果想要用手指縮小螢幕,則修改 "minimum-scale=1.0" 這個字串,例如參數改為 0.5,就是將可視範圍縮小為一半的尺寸。


2. 修改範本

在修改範本之前,建議先閱讀「備份範本的訣竅」系列文章。

接著到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋字串 maximum-scaleminimum-scale ,按照「1. 修改原理」來調整參數即可。


3. 自行新增語法

最怕的是在範本中根本搜尋不到相關字串,這代表不知何種原因,導致你的範本沒有「一、不同範本的差異」之中的任何語法,那麼只好自行新增相關語法了,請按以下流程:

  • 在範本中找到 <head> 這個字串,在下一行新增相關語法。
  • 請新增「一、不同範本的差異」→「2. 早期範本語法」或是「3. 最近一年的語法」都可以
  • 最後調整縮放的參數

如果你是非 Blogger 網頁,請新增「一、不同範本的差異」→「1. 非官方語法」這裡的程式碼,再調整參數即可。


更多 Blogger 行動版技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP