mobile web 一直都是這些年來的新興的玩意兒, 不過由於 APP 的排擠效應, 以及 mobile browser 的 performance issue, 所以它總是很容易就被冷落到一旁
為了符合各式各樣的 resolution, fluid design 更是順應此趨勢而大放異彩, 其中 font-size 的設定更是一門學問, 也因此 viewport unit 受到眾多 developers 的親賴, 不過並不是所有的 mobile browser 都可以 support 這個單位
為了讓絕大部分的 mobile web visitor 有更好的視覺體驗, 筆者採納了阿裡巴巴 mobile web 的 design guideline: 1rem = 1vw 的做法, 撰寫了一個 remPolyfill 來讓這些頑強的 Android browser 有個依歸, 透過簡易的設定便可以讓當前 page 擁有 flex 的 font-size 系統, 透過本分享, 相信更容易了解其開發初衷與應用方法喔!
※ 歡迎點擊下方連結進行觀看 : remPolyfill: http://mei.homin.com.tw/remPolyfill…
使用方法: 透過右下角的按鈕來作模式切換, 一般 off 狀態時, 字型維持其原先設定
一般狀態, 字型大小維持原先設定
當啟用 remPolyfill 後, 頁面將會依照 1rem = 1vw 的原則, 動態調整 root 的字型大小, 此時頁面上的文字由於設定 3.5rem, 也因使將會隨著當前 viewport 的寬度而有所變化, 達到了我們 adopt flex unit 的初衷
啟用 remPolyfill 後, 將動態調整 root 的字型寬度, 此時採用 rem 單位的樣式就會直接受益動態的進行調整
為什麼還要撰寫這類的 polyfill 呢 ? Viewport Units 支援度不是很高 ?
其實筆者一直本著「產品態度」這樣的原則督促自己, 沒有支援 viewport unit (vw, vh vmin, vmax) 的瀏覽器就讓它過去吧! 工程師也該善盡新技術推廣的義務才是!
不過再見識到千千百百個 Android browser 之後, 不免淚潸然流下, 因為看不懂這種單位的瀏覽器真的是花招百出, 頁面一整個被 render 的亂七八糟, 一瞬間 front-end 又便成眾矢之的, 為了尋求一個雙贏的解套方法, 於是乎開發了 remPolyfill 這樣的 tool 來讓這些”頑石”有個依歸
採用 rem 作為 flex unit 的主要依據是由於大部分的 mobile browser 均有 support 該 unit, 只要是頁面設計的時候是採用 rem 這樣的單位, 便可以快速的達到 page layout 的變化, 剩下的…便是讓 root 的 font-size 可以像 vw 這般靈活即可, 當然這也是 remPolyfill 所做的主要事務之一
如何使用 remPolyfill 到我們服務 ?
使用的方法其實很簡單, 首先, 我們要先把相關的 JavaScript require 到頁面中
< script async src="remPolyfill.js" >< /script >
接著可以透過 JavaScript 來動態設定是否啟用 remPolyfill, 本 tool 是直接在 navagator 進行功能擴展, 所以 developer 只要更改相關屬性, 便可以決定要進行開啟或者關閉
//turn on remPolyfillnavigator.remPolyfill = true;
//turn off remPolyfillnavigator.remPolyfill = false;
是不是很簡單 ?! 除此之外, 我們也可以藉由更改 < html > 的 class 來達到同樣的效果
var html;html = docuemnt.querySelector('html');
//turn on remPolyfillhtml.classList.add('rem-polyfill');
//turn off remPolyfillhtml.classList.remove('rem-polyfill');
此外, 我們也可以藉由觀看 navigator 相關的設定來觀看 remPolyfill 是否啟用
console.log(navigator.remPolyfill); //true || false
如果想要知道當前 browser 是否有支援 viewport unit 的話, 有可以透過類似的做法來偵測喔!
console.log(navigator.viewportUnits); //true || fasle
以上, 便是 remPolyfill 的基本使用方法, 如果想要知道它的內部怎麼運作的, 也可以直接前往 github 進行一覽喔!
測試環境:
- OS: Android 4.1 以上, iOS 9.3.4
- Browser: mobile safari, android browser, chrome
