這個「Blogger 論壇貼文」表示,"行動版在使用手機瀏覽的時候無法使用兩指放大縮小"。於是測試了幾個 Blogger 網站,發現的確連 WFU BLOG 也不能做到這件事。
其實在使用平板的時候,由於某些網頁字不夠大,常常需要用兩隻手指將螢幕放大。而手機的螢幕可視範圍更小,如果網頁有圖片的話,"能用手指縮放" 這件事的確能提供讀者友善的使用體驗。
於是研究了一下 Blogger 行動版如何開啟這項功能,其實方法很簡單,請見本文的筆記整理。
(圖片出處: pixabay.com)
雖然修改的原理很簡單,但由於 Blogger 範本內容事實上不斷地在更新,也可以說是官方持續地在加強範本預設的語法,因此這件事變得稍稍有點難度。如果讀者熟悉範本的語法,那麼可以直接跳到「二、修改範本」;若是不熟悉的話,建議看完這個章節,跟縮放語法相關的所有狀況。
1. 非官方語法
如果非 Blogger 平台的網頁,或是非 Blogger 官方範本,那麼跟縮放相關的語法,可能長得像類似這樣子:
2. 早期範本語法
不同時期的 Blogger 範本預設內容都不一樣,在後台選擇任一官方範本、並立即套用,你在範本中就可看到最新的預設內容。
在最早的 Blogger 範本,也稱為「傳統範本」,連「1. 非官方語法」這一行都找不到。
進入行動裝置時代後,如果你的 Blogger 是在這個時期建立的,那麼應該會在範本中看到下列的判斷式語法:
3. 最近一年的語法
今年 Blogger 進一步精簡了判斷式語法,如果你的網站是近幾個月才建立的,那麼範本中應該可找到下列語法:
1. 修改原理
雖然上面看到的語法範例都長得不一樣,不過重點只有一個,就是修改官方的預設參數,也就是下面這個字串:
2. 修改範本
在修改範本之前,建議先閱讀「備份範本的訣竅」系列文章。
接著到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋字串maximum-scale 或 minimum-scale ,按照「1. 修改原理」來調整參數即可。
3. 自行新增語法
最怕的是在範本中根本搜尋不到相關字串,這代表不知何種原因,導致你的範本沒有「一、不同範本的差異」之中的任何語法,那麼只好自行新增相關語法了,請按以下流程:
如果你是非 Blogger 網頁,請新增「一、不同範本的差異」→「1. 非官方語法」這裡的程式碼,再調整參數即可。
其實在使用平板的時候,由於某些網頁字不夠大,常常需要用兩隻手指將螢幕放大。而手機的螢幕可視範圍更小,如果網頁有圖片的話,"能用手指縮放" 這件事的確能提供讀者友善的使用體驗。
於是研究了一下 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 行動版技巧: