移動前端

移動前端相容操作總結

移動端Web頁面,即常說的H5頁面、手機頁面、webview頁面等。 手機裝置螢幕尺寸不一,做移動端的Web頁面,需要考慮在安卓/IOS的各種尺寸裝置上的相容,這裡總結的是針對移動端裝置的頁面,設計與前端實現怎樣做能更好地適配不同螢幕寬度的移動裝置。 適配的目標 引用一文章的描述: 在不同尺寸的手機 […]

移動前端適配方法總結

所謂前端適配,就是為了讓移動設計稿在大部分的移動裝置上看起來有一致的展示效果,目前比較流行的方法有兩種。各有利弊,使用第一種在某些瀏覽器的webview裡面會出現相容問題,而且對於1畫素會無法渲染。而用rem的方案在背景和字型上也會有某些問題。 方案一:強制meta viewport的寬度為設計稿的 […]

移動前端圖片壓縮上傳的例項

摘要:之前在做一個小遊戲平臺專案,有個“使用者中心”模組,就涉及到了頭像上傳的功能。在做移動端圖片上傳的時候,傳的都是手機本地圖片,而本地圖片一般都相對比較大,拿現在的智慧手機來說,平時拍很多圖片都是兩三兆的,如果直接這樣上傳,那圖片就太大了,如果使用者用的是移動流量,完全把圖片上傳顯然不是一個好辦 […]

《移動Web前端高效開發實戰》筆記1——靜態佈局在移動端上的自適應

1.整體縮放 整體縮放可以用在營銷活動頁,營銷活動可能因為設計美觀需求必須使用背景圖片而非背景色,因此需要考慮背景圖適應螢幕大小。開發者可以用320畫素的寬度作為基礎寬度(高度可以固定),然後通過計算實際文件寬度來進行相應縮放。 使用整體縮放佈局開發的專案在載入過程中需要監聽resize事件,程式碼 […]