2015年12月29日

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

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 行動版技巧:

2 則留言:

  1. WFU大真的好強喔!!!!

    回覆刪除
    回覆
    1. 你的寫作教學風評也很好呢,有機會要跟你學習!

      刪除

張貼留言注意事項:

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