vuejs開發h5頁面總結
關於布局方案
當拿到設計師給的ui設計圖，前端的首要任務就是布局和樣式，相信這對於大部分前端工程師來說已經不是什麼難題了。移動端的布局相對pc較為簡單，關鍵在於對不同裝置的適配。之前介紹了一篇關於移動端rem布局方案，這大致是網易h5的適配方案。不過實踐中發現**開源的可伸縮布局方案效果更好且更容易使用。
網易雲的方案總結為：根據螢幕大小 / 750 = 所求字型 / 基準字型大小比值相等，動態調節html的font-size大小。
**的方案總結為：根據裝置裝置畫素比設定scale的值，保持視口device-width始終等於裝置物理畫素，接著根據螢幕大小動態計算根字型大小，具體是將螢幕劃分為10等分，每份為a，1rem就等於10a。
通常我們會拿到750寬的設計稿，這是基於iphone6的物理解析度。有的設計師也許會偷懶，設計圖上面沒有任何的標註，如果我們邊開發邊量尺寸，無疑效率是比較低的。要麼讓設計師標註上，要麼自食其力。如果設計師實在沒有時間，推薦使用 新增markman進行標註，免費版閹割了一些功能（比如無法儲存本地）不過基本滿足了我們的需求了。
標註完成後開始寫我們的樣式，使用了**的lib-flexible庫之後，我們的根字型基準值就為750/100*10 = 75px。此時我們從圖中若某個標註為100px，那麼css中就應該設定為100/75 = 1.333333rem。所以為了提高開發效率，可以
h5頁面開發
相信大家在做h5頁面開發的時候，也會遇到一些問題。筆者將h5開發過程中常見的一些問題和解決辦法列舉出來，有需要的朋友可以參考一下。1.安卓瀏覽器看背景，有些裝置會模糊。同等比例的在pc端頁面和移動手機端頁面的解析度差很多，原因和devicepixelratio有關。手機解析度比pc端的解析度小，按照...
H5頁面測試總結
其實經過幾次h5頁面測試之後，發現存在很多共同的問題，所以在此對h5頁面的測試點 以及容易出問題的點 做乙個總結，給開發同學自測，以及準備入手h5測試的同學乙個參考。1 業務邏輯相關 之外，h5頁面的測試，需要關注以下幾點 1.1 登陸 1.2 翻頁 1.3 重新整理與返回 1.4 mtop介面返回...
H5頁面測試實戰總結
基本上只要對那個view長按，然後看是不是有反應，比如手機震動 android 或者出現文字選擇貼上 android ios 那麼就是webview！橫屏豎屏相互切換，能自適應，並且布局不會亂掉 h5的頁面在pc端也是能訪問的，chrome對h5支援最好，功能的測試可以在pc端chrome下先測試，...