使用筆記/移動設備優化篇
你可以幫助我們擴充關於該主題的更多資訊。
MediaWiki的預設外觀Vector對移動端其實沒有特別的優化。雖然一部分外觀自帶了響應式設計,但是一些頁面(比如近期變更和歷史差異)依然對手機很不友好。以下將介紹MediaWiki上的移動設備優化。
MobileFrontend
MobileFrontend加入了移動端視圖(為移動設備顯示特定的外觀)與一部分特殊頁面的移動設備優化版本,調整了部分元素在移動端的顯示效果。其可以說提供了最基本的移動設備體驗優化。
根據安裝提示安裝完畢後,你的站台應當可以檢測設備尺寸並自動展示對應的視圖了。
在安裝完這個擴展程序後,站台的CSS和JS就需要做出相應的調整了。將桌面端視圖專用的CSS和JS放在Common.css與Common.js內,而移動端視圖專用的則應當放到Mobile.css與Mobile.js內。若啟用了Gadgets,則可以把兩個視圖通用的CSS與JS放在一個
targets
設定為desktop,mobile
的Gadget裡面。我站分別是MediaWiki:Gadget-site-styles.css和MediaWiki:Gadget-site.js。
但是,很有可能你並沒有在一開始就區分好哪些是移動端專用的。這時你就需要考慮自己優化。
擴展程序不能幫你解決所有問題
在移動端視圖,你很有可能會遇到頁面寬度超限的情況。
但是遺憾的是,擴展程序不能自動修復這些問題⸺也就是說,如果你寫了一個特別大的表格,那麼手機端很可能沒法好好查看。
遇到這種情況,你就需要自行應用一些CSS。以下介紹一些常見問題及其優化方法。
常見問題
大表格超寬
FandomMobile的處理是,處理成超寬滾動,主要是透過CSS的overflow
去處理。
Lakeus拿了Timeless的一個腳本做了類似的處理。
模板超寬或需要在不同的畫面尺寸上顯示不同的布局
透過CSS的媒體查詢(Media queries)可以自行打斷點。同時也需要靈活運用flex布局和grid布局。
部分擴展程序不能在移動版視圖工作
對一些擴展來說,可能有人修復。另一些則也沒什麼辦法。
就目前來說因為最新版本targets
已經徹底被刪除,所以因為ResourceLoader註冊而導致移動端不載入的問題似乎是不應該出現了。
主要頁面 | |
---|---|
正文 | |
外部連結 |