本頁使用了標題或全文手工轉換

使用筆記/流動裝置最佳化篇

From 存档计划
該頁面尚未完成。

你可以幫助我們擴充關於該主題的更多資訊。

該頁面的編輯正在進行中。

請幫助我們擴充或改進這篇文章。

MediaWiki的預設佈景主題Vector對流動端其實沒有特別的最佳化。雖然一部分佈景主題內建了響應式設計,但是一些頁面(比如近期變更和歷史差異)依然對手機很不友好。以下將介紹MediaWiki上的流動裝置最佳化。

MobileFrontend[edit | edit source]

MobileFrontend加入了流動端視圖(為流動裝置顯示特定的佈景主題)與一部分特殊頁面的流動裝置最佳化版本,調整了部分元素在流動端的顯示效果。其可以說提供了最基本的流動裝置體驗最佳化。

根據安裝提示安裝完畢後,你的站點應當可以檢測裝置尺寸並自動展示對應的視圖了。

在安裝完這個擴充程式後,站點的CSS和JS就需要做出相應的調整了。將桌面端視圖專用的CSS和JS放在Common.css與Common.js內,而流動端視圖專用的則應當放到Mobile.css與Mobile.js內。若啟用了Gadgets,則可以把兩個視圖通用的CSS與JS放在一個targets設置為desktop,mobile的Gadget裏面。我站分別是MediaWiki:Gadget-site-styles.cssMediaWiki:Gadget-site.js

但是,很有可能你並沒有在一開始就區分好哪些是流動端專用的。這時你就需要考慮自己最佳化。

擴充程式不能幫你解決所有問題[edit | edit source]

在流動端視圖,你很有可能會遇到頁面寬度超限的情況。

但是遺憾的是,擴充程式不能自動修復這些問題——也就是說,如果你寫了一個特別大的表格,那麼手機端很可能沒法好好檢視。

遇到這種情況,你就需要自行應用一些CSS。以下介紹一些常見問題的最佳化方法。