ReactJs移動端相容問題彙總

李文楊發表於2018-07-07

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

 

 

 

相關文章