這個「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 ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport' />二、修改範本
1. 修改原理
雖然上面看到的語法範例都長得不一樣，不過重點只有一個，就是修改官方的預設參數，也就是下面這個字串：
maximum-scale=1.0- 這代表 "網頁最大能放大為幾倍"，如果把參數改為 5.0 就是最多可用手指放大到 5 倍。
- 相信 5 倍已經夠用了，如果想更大可以把參數改為 10.0。
- 同樣的道理，如果想要用手指縮小螢幕，則修改 "minimum-scale=1.0" 這個字串，例如參數改為 0.5，就是將可視範圍縮小為一半的尺寸。
2. 修改範本
在修改範本之前，建議先閱讀「備份範本的訣竅」系列文章。
接著到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋字串
3. 自行新增語法
最怕的是在範本中根本搜尋不到相關字串，這代表不知何種原因，導致你的範本沒有「一、不同範本的差異」之中的任何語法，那麼只好自行新增相關語法了，請按以下流程：
- 在範本中找到
<head> 這個字串，在下一行新增相關語法。 - 請新增「一、不同範本的差異」→「2. 早期範本語法」或是「3. 最近一年的語法」都可以
- 最後調整縮放的參數
如果你是非 Blogger 網頁，請新增「一、不同範本的差異」→「1. 非官方語法」這裡的程式碼，再調整參數即可。
更多 Blogger 行動版技巧：
WFU大真的好強喔！！！！
回覆刪除