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