[極致用户體驗] 讓你的網頁,適配微信大字號模式!體驗超好,快來收藏

語言: CN / TW / HK

攜手創作,共同成長!這是我參與「掘金日新計劃 · 8 月更文挑戰」的第1天,點擊查看活動詳情。

我是HullQin,公眾號 線下聚會遊戲 的作者 歡迎關注公眾號,聯繫我,交個朋友 ,轉發本文前需獲得作者HullQin授權。我獨立開發了《聯機桌遊合集》,是個網頁,可以很方便的跟朋友聯機玩鬥地主、五子棋等遊戲,不收費無廣告。還獨立開發了《合成大西瓜重製版》。還開發了《Dice Crush》參加Game Jam 2022。喜歡可以關注我噢~我有空了會分享做遊戲的相關技術,會在這2個專欄裏分享:《教你做小遊戲》、 《極致用户體驗》

背景

之前的文章,我提到網頁開發的一個常見問題: 《在微信大字號模式下,網頁樣式亂了怎麼辦?》 。上文中提供了一種解決方案,在用户調整微信字體大小後,可以保證網頁字體大小不變,解決了樣式錯亂的問題。

但是這背離了微信「關懷模式」和「大字號模式」的初衷。 微信設計這些模式,不就是為了幫助中老年人們看清網頁嗎?

因此,我希望讓網頁適配大字號模式。當用户調整字號時, 網頁都應該正常展示對應字號,並且不影響用户體驗!

開發的注意事項

何時用em/rem何時用px

眾所周知,em和rem是相對單位,px是絕對單位。

用px定義後,只要沒變換樣式(例如transform、animation等),那麼你用px定義的尺寸、距離就是固定的。

而em是通過相對父元素 font-size 的倍數來定義尺寸、距離。rem是通過相對根元素 font-size 的倍數來定義尺寸、距離。

而我們知道,在微信內置瀏覽器中,設置字體大小,正是通過改變字體大小實現的。

也就是説,如果你用了px定義非 font-size 的樣式,那麼它一直不會變。(當然,如果你用px定義 font-size ,該樣式還是會放縮的)。如果你用了em或rem定義樣式,那麼它就會跟隨微信設置的字體大小改變。

iOS解決字號閃動問題

注意,在iOS操作系統下(iPhone或iPad),仍然有個問題。

如果用户已經提前設置了網頁的非標準字號,就有個明顯的閃動: