IOS與安卓樣式的相容問題合集
阿新 • • 發佈：2018-11-25
1.margin在IOS中失效
在頁面中元素使用margin值，在某些IOS裝置下會出現失效的情況，而安卓機則正常顯示，此問題暫無直接的解決方案，當前使用空DIV控制間距。
2.fixed定位問題
整個頁面的fixed定位，在ios下下拉會觸發下拉事件，但是沒有動畫效果。Android就能正常執行
flex中使用 絕對定位，ios出現嚴重錯位，導致父級元素也會變成絕對定位，Android能達到理想效果
總而言之 儘量不用fixed
3.absolute定位問題
①使用absolute定位，並且寬頻設定了100% 並且設定了padding就會導致螢幕寬度溢位，出現頁面左右可以移動的bug，模擬器上是沒有問題，但是真機上是有這個問題的。這個問題讓我除錯並痛苦了許久
②使用absolute並且當前元素是flex容器這種情況在Ios下面佈局不會起到左右，會出現所有元素轉換成了absloute並且文字錯位
③總而言之 儘量不用 absolute
4. word-spacing在button中的問題
有時候在使用大按鈕的時候兩個字中間希望有段間距，但是目前沒有找到能使用的佔位符，所以使用了的word-spacing加空格 這個方法來設定文字的間距，但是在iPhone6s 上兩個字中間一個空格的時候整體會向右偏，必須設定兩個空格。
5.相同程式碼存在效果差異
在真機測試或者模擬器測試，總彙出現各種樣式上的差異，造成原因比較多，因為不同的手機呈現的效果或者它本身採用的技術均存在差異，最終呈現的效果有時候就會出現較大的差別。但是這些差別一般都是在可以接受的範圍。