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

2022-03-06 06:53:50 字數 792 閱讀 4822

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

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

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

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

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

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

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

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

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

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

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

Flexible實現H5移動端適配小demo

看了宇哥關於移動端適配的分享後,加上目前公司專案也需要做移動端適配,今天就抽空搞了搞。目前業界還是比較推崇手淘使用 rem viewport 的解決方案,今天自己模仿手淘flexible的解決方案,實現了個簡單的demo。flexible動態獲取裝置寬度和dpr,為html元素新增兩個屬性 data...

h5頁面在移動端需要注意的一些事情

h5頁面在移動端無法滿屏自適應視窗,怎麼辦?h5頁面在移動端字型應該怎麼設定?1 ios 系統 預設中文字型是heiti sc 預設英文本型是helvetica 預設數字字型是helveticaneue 無微軟雅黑字型 2.android 系統 預設中文字型是droidsansfallback 預設...

h5呼叫底層介面的一些知識

之前接觸過這方面的知識,一直想寫一些關於 的文字,但考慮到浪費時間,又不具備大神的實力,也不想去把別人的 照搬過來,所以一直都是空白著的,今天敲 的時候,有了乙個比較好的想法,第一,定位在學習這一塊,去學習一些領域的新知識,並分享自己每天的學習成果,第二,總結工作中遇到的 解決的問題,拿出自己的de...