前言

• 這個問題只出現在app統(tǒng)一mode為ios,在安卓手機上有顯示問題

  
  

問題描述

• 如下圖,同一個app在不同的android手機上顯示的border有問題

  
  
  
  

原因

• ionic2使用了帶小數點的border-width,而帶小數點的border存在瀏覽器兼容性問題

  
  
  
  

• 百度了一下帶小數點的px兼容性問題
  采用四舍五入解析的瀏覽器：IE8、IE9、Chrome,如0.55px顯示為1px
  采用直接取整解析的瀏覽器：IE7、Firefox,如0.55px顯示為0px
  可以顯示帶小數點的瀏覽器 : Safari,如0.55px就顯示為0.55px

• 所以我們要么統(tǒng)一border-width為1px要么統(tǒng)一為0

解決過程

• 既然是ionic使用了0.55px,那我們就找源碼看哪里用了0.55px

  
  

• 直接修改源碼很不科學哦,每次重新安裝node_modules都要修改,每個開發(fā)人員都要修改,于是看官網有沒有提供這個變量

  
  
• 那就在我們的src/theme/variables.scss主題文件,覆蓋這個屬性
  

最后

• 原本border-width是0.55px,border-color是#c8c7cc,現在border統(tǒng)一為1px,增寬了,顯得#c8c7cc這個顏色太深了
  于是和上面解決過程一樣搜索#c8c7cc,最終找到了變量$list-border-color,修改為一個淺顏色.如下圖