記錄一些移動端H5，小程式視覺還原問題及方法

標籤：add   更新   記錄   icon   取消   方法   彈性布局   程式   之間   

前端，特別是移動端如果對視覺還原要求比較高的時候。功能測試和效能測試完成之後。UI真的是一個像素一個像素的給你摳出來哪裡還原不到位

之前項目要求還原度要達到98%以上。所以每到視覺還原的時候真的是挺痛苦的，這裡記錄一些視覺還原不同機型上的一些顯示問題。

• 小程式iOS端1rpx顯示2px寬度

這個視覺問題這真的是很痛苦的。我們想到針對iOS端單位1rpx，然後transform：scale(0.5);但是會導致個別安卓機型顯示特別細，所以這個方案否決了。

最後使用的是http://www.cnblogs.com/leungUwah/p/8519759.html上一篇博文寫的方案，後面完美解決

• 明明設定了對應的font-size大小但是還是高度的還原還是對不上

解決辦法：檢查一下最外層元素有沒有設定font-size:0;取消元素之間的間隙

• 小程式元素高度較小的時候安卓機顯示字型偏上問題

解決辦法：不要因為總共20px的高就設定line-height:20px;要設定line-height:1;然後其他的高度用padding撐開；這種情況如果對應有前面跟有icon的話icon的display:inline-block;vertical-align:top;

• 數字字型行高與中文不在一個高度上的問題

解決辦法：這就江郎才盡了。數字本來就別中文矮難道每個數字都單獨包起來嗎，這治標不治本。UI在設計的時候工具弄的多好看多好看都是建立在某個較好狀態數字下的或者其他顯示，前端做出來

之後顯示肯定是動態這還真沒辦法。

　　

• 小程式icon圖片background-image顯示rpx單位顯示邊緣有較細微顯示不完整問題

解決辦法：有兩種1.如果還是用rpx單位，那icon整合成雪碧圖的時候對應icon周圍留1-2個像素的空白。2.用px單位http://www.cnblogs.com/leungUwah/p/8519759.html還是上一篇博文寫的方案。

　　

• 其他

多用彈性布局，這對視覺還原效果較好可以減少後面不少的麻煩。還有一個就是我很少幾乎不用float，脫離文檔流還要清除浮動，不然對其他的元素有影響，說不定還會有什麼意想不到的bug。還有一個就是

拿到視覺或者ue搞的時候心裡就該先想清除怎麼布局了；當然了你這個要根據你的需求顯示來的。

 

好了，暫時想到的就這麼多後面如果後面遇到的話會持續更新。

4月的最後一天了，抽點時間來寫寫部落格，記錄一些自己遇到的疑難雜症，有寫得不對的地方希望大家多多指正。

記錄一些移動端H5，小程式視覺還原問題及方法