之前做的加速器的項目,今天發現有個機型(三星S10)樣式錯亂,其他測試機無法復現這個問題。
開始排查:三星S10用自帶瀏覽器、QQ、UC、搜狗瀏覽器都看了,是沒問題,只有在客戶端上訪問這個頁面有問題,在同事的幫助下解決了,記錄一下
原代碼如下:
由於某些機型的長款比例和我卡片的比例不一致,導致卡片在某些機型顯示的高度更高一些。所以不要用百分比!!!用寬高固定的值。用margin:0 atuo居中,不要寫四個margin值,麻煩還容易出問題!
先改掉了百分比,換成了固定的寬高,發現樣式對了一部分,但還是有問題,如下圖:(只看上面那個卡片就行,下面卡片沒改)
說明改成固定寬高的思路是對的。但是margin我寫了四個值,改成左右居中之後,樣式就完全對了
最後修改後的代碼如下:
對了,還刪除了font_size.js中的下圖
總結:
1,慎用百分比!!!像有圖片背景這種要求一定寬高比的就不用百分比!!!
2,豎直margin都可以用,水平margin auto就是居中,不要再寫四個margin值!!!