ReactJs移動端相容問題匯總

標籤：rem   項目   ace   tools   scss   空白   大小   image   bsp   

汽車H5使用ReactJs問題匯總

 

Q：安卓4.4webview顯示空白？

A：初步懷疑是css屬性沒有加首碼引發的相容問題，但添加後發現也不行，通過webview調試後控制台輸出Set is undefined，搜尋後發現React依賴集合類型 Map 和 Set。所以如果要相容低版本瀏覽器可以引入一個全域的 polyfill，例如 core-js 或 babel-polyfill。 

 

Q：安卓低版本點擊事件不生效？

A：調試檢查發現該點擊事件中使用了for of文法，無法相容低版本，使用map或forEach方法替換即可。

Q：使用@import匯入的css檔案沒有被autoprefixer自動添加首碼？

A：檢查發現部分flex和transfrom屬性沒有加相容首碼，但項目引入了autoprefixer自動添加首碼的外掛程式，經過對比代碼發現在scss檔案中使用@import引入的檔案都沒有被成功添加，通過引入postcss-import可以解決這個問題。 

 

 

Q：android上line-height不置中的問題？

據分析得知原因： 

1.字型大小不要使用奇數字型大小，帶小數點的更不要提了。也就是說被2整除的整數且不可小於12px。 

2.使用rem的單位時造成（根項目如果動態改變時，根項目字型可能不是整數）。

由於網上的方法都不好使，後來想了個辦法，把用到line-height設定垂直置中的標籤都換成button。。。就行了！  

 

Q：移動端使用overflow-auto實現滾動卡頓?

A：添加屬性 -webkit-overflow-scrolling: touch;  //有回彈效果 

 

Q：Android WebView 調試方法

前置條件Android4.4+

1.在APP中啟用 WebView 調試，開啟調試後，Chrome DevTools才能對WebView進行遠端偵錯；

WebView.setWebContentsDebuggingEnabled(true);　

2.通過訪問chrome://inspect/#devices訪問已啟用調試的 WebView 列表；點擊inspect即可調試，如無法調試頁面空白FQ即可。 

 

 

 

ReactJs移動端相容問題匯總