ReactJs移動端兼容問題彙總

汽車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便可。