點燈坊

學而時習之,不亦悅乎

如何使 iPad mini 的 Safari 字體放大 ?

Sam Xiao's Avatar 2019-06-14

iPad mini 重量與尺寸討喜,是很多人最愛,但對於 RWD 而言,卻面臨極大挑戰,因為無法由 Media Query 分辨出 iPad 與 iPad mini,導致 iPad mini 字體常過小,透過本文的 JavaScript,可自力救濟讓 iPad mini 字體放大。

Version

macOS Mojave 10.4.5
iOS 12.3.1

macOS

size000

在 macOS Safari 的 Favorites 隨便先找一個 bookmark,按右鍵選 Rename,改名成 Font+

size001

同一個 bookmark 按右鍵選擇 Edit Address,將以下 JavaScript 貼上。

javascript:let incrementSize=20;let p = document.getElementsByTagName('*');for(i = 0; i < p.length; i++) {if (p[i].style.fontSize) p[i].style.fontSize=(parseInt(p[i].style.fontSize.slice(0, -2)) + incrementSize) + 'px';else p[i].style.fontSize=(12+incrementSize)+'px';}

稍後再來解釋這段 code 意義。

iOS

size002

Settings -> Safari

Show Favorites Bar enable。

建議也同時將 Show Tab Bar disable

size003

Vuetify 官網在 iPad mini 原本字體極小,但透過 Font+ 放大後,已明顯可接受。

JavaScript

let incrementSize = 20;
let p = document.getElementsByTagName('*');

for(i = 0; i < p.length; i++) {
  if (p[i].style.fontSize) 
    p[i].style.fontSize = (parseInt(p[i].style.fontSize.slice(0, -2)) + incrementSize) + 'px';
  else 
    p[i].style.fontSize = (12 + incrementSize) + 'px';
}

第 1 行

let incrementSize = 20;

目前按下 Font+ 會增加 20px,此部份可自行調整。

第 2 行

let p = document.getElementsByTagName('*');

獲得全部 DOM element。

第 4 行

for(i = 0; i < p.length; i++) {

每個 DOM element 透過 for loop 都跑一次。

第 5 行

if (p[i].style.fontSize) 
    p[i].style.fontSize = (parseInt(p[i].style.fontSize.slice(0, -2)) + incrementSize) + 'px';

若有 fontSize property,則讀取 fontSize,由於帶有 px 結尾,因此透過 slice() 不取 px,然後再由 parseInt() 轉成 number 加上 20,最後補上 px 成為 string 指定給 fontSize property。

第 7 行

else 
  p[i].style.fontSize = (12 + incrementSize) + 'px';

若根本沒有 fontSize property,則視為 12px,再加上 20px

Conclusion

  • 目前此方法只適用於 iPad,因為 iPhone 並不允許 Safari 使用 favorites bar ,因此無法使用此技巧

Reference

Charlie Sorrel, How to increase the font size in Mobile Safari ?
Kirsch, Font size bookmarklets