前言
-
這個(gè)問(wèn)題只出現(xiàn)在app統(tǒng)一mode為ios,在安卓手機(jī)上有顯示問(wèn)題
問(wèn)題描述
-
如下圖,同一個(gè)app在不同的android手機(jī)上顯示的border有問(wèn)題
原因
-
ionic2使用了帶小數(shù)點(diǎn)的border-width,而帶小數(shù)點(diǎn)的border存在瀏覽器兼容性問(wèn)題
百度了一下帶小數(shù)點(diǎn)的px兼容性問(wèn)題
采用四舍五入解析的瀏覽器：IE8唐责、IE9侧啼、Chrome,如0.55px顯示為1px
采用直接取整解析的瀏覽器：IE7恍风、Firefox,如0.55px顯示為0px
可以顯示帶小數(shù)點(diǎn)的瀏覽器 : Safari,如0.55px就顯示為0.55px所以我們要么統(tǒng)一border-width為1px要么統(tǒng)一為0
解決過(guò)程
-
既然是ionic使用了0.55px,那我們就找源碼看哪里用了0.55px
-
直接修改源碼很不科學(xué)哦,每次重新安裝node_modules都要修改,每個(gè)開(kāi)發(fā)人員都要修改,于是看官網(wǎng)有沒(méi)有提供這個(gè)變量
- 那就在我們的
src/theme/variables.scss主題文件,覆蓋這個(gè)屬性
最后
-
原本border-width是0.55px,border-color是#c8c7cc,現(xiàn)在border統(tǒng)一為1px,增寬了,顯得#c8c7cc這個(gè)顏色太深了
于是和上面解決過(guò)程一樣搜索#c8c7cc,最終找到了變量$list-border-color,修改為一個(gè)淺顏色.如下圖
