前端bug記錄-三星s10樣式不兼容

之前做的加速器的項目,今天發現有個機型(三星S10)樣式錯亂,其他測試機無法復現這個問題。

開始排查:三星S10用自帶瀏覽器、QQ、UC、搜狗瀏覽器都看了,是沒問題,只有在客戶端上訪問這個頁面有問題,在同事的幫助下解決了,記錄一下

原代碼如下:

由於某些機型的長款比例和我卡片的比例不一致,導致卡片在某些機型顯示的高度更高一些。所以不要用百分比!!!用寬高固定的值。用margin:0 atuo居中,不要寫四個margin值,麻煩還容易出問題!

先改掉了百分比,換成了固定的寬高,發現樣式對了一部分,但還是有問題,如下圖:(只看上面那個卡片就行,下面卡片沒改)

說明改成固定寬高的思路是對的。但是margin我寫了四個值,改成左右居中之後,樣式就完全對了

最後修改後的代碼如下:

對了,還刪除了font_size.js中的下圖

 

總結:
1,慎用百分比!!!像有圖片背景這種要求一定寬高比的就不用百分比!!!
2,豎直margin都可以用,水平margin auto就是居中,不要再寫四個margin值!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章