移动端技术选型,将更多关注点放在移动设备, web应用程序上

  1. React Native,继续关注
  2. Flutter
  3. PWA

移动端常见问题汇总
https://github.com/JowayYoung/mobile-devpit

安卓相关问题

递归操作的函数,在使用arguments.callee的时候,报错undefined;因为arguments.callee在严格模式下会失效

  1. Q:安卓4.4webview显示空白?
  2. A:初步怀疑是css属性没有加前缀引发的兼容问题,但添加后发现也不行,通过webview调试后控制台输出Set is undefined,搜索后发现React依赖集合类型 Map Set。所以如果要兼容低版本浏览器可以引入一个全局的 polyfill,例如 core-js babel-polyfill
  3. Q:安卓低版本点击事件不生效?
  4. A:调试检查发现该点击事件中使用了for of语法,无法兼容低版本,使用mapforEach方法替换即可。
  5. Q:使用@import导入的css文件没有被autoprefixer自动添加前缀?
  6. A:检查发现部分flextransfrom属性没有加兼容前缀,但项目引入了autoprefixer自动添加前缀的插件,经过对比代码发现在scss文件中使用@import引入的文件都没有被成功添加,通过引入postcss-import可以解决这个问题。
  7. Qandroidline-height不居中的问题?
  8. 据分析得知原因:
  9. 1.字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px
  10. 2.使用rem的单位时造成(根元素如果动态改变时,根元素字体可能不是整数)。
  11. 由于网上的方法都不好使,后来想了个办法,把用到line-height设置垂直居中的标签都换成button。。。就行了!
  12. Q:移动端使用overflow-auto实现滚动卡顿?
  13. A:添加属性 -webkit-overflow-scrolling: touch; //有回弹效果
  14. QAndroid WebView 调试方法
  15. 前置条件Android4.4+
  16. 1.APP中启用 WebView 调试,开启调试后,Chrome DevTools才能对WebView进行远程调试;
  17. WebView.setWebContentsDebuggingEnabled(true); 
  18. 2.通过访问chrome://inspect/#devices访问已启用调试的 WebView 列表;点击inspect即可调试,如无法调试页面空白FQ即可
  19. "rc-util": "^5.0.6",