Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 784

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

$
0
0
這個「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 行動版技巧:

Viewing all articles
Browse latest Browse all 784

Trending Articles