Android webview白屏

最新推荐文章于 2025-06-13 23:03:24 发布

apple_xiangsiyu

最新推荐文章于 2025-06-13 23:03:24 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： android 进阶篇

本文链接：https://blog.youkuaiyun.com/apple_xiangsiyu/article/details/78131654

android 进阶篇专栏收录该内容

20 篇文章

订阅专栏

本文讨论了Android开发中WebView加载H5页面时遇到的各种问题，特别是白屏问题。当使用低价Android设备时，由于WebView内核不支持最新H5框架，如Vue，导致白屏现象。解决方案是让H5开发者引入babel-polyfill，在import Vue之前，以确保对老旧机型的ES6语法兼容，从而解决白屏问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，Android 程序员会遇到一个极其之坑的问题，webview 加载h5页面，然后各种遭bb的问题就出来了

1.webview 只显示一部分内容

2.webview显示的图片不正常，巨TM大，或者巨tm小

3.webview上的点击没效果，你mmp的

4...

当遇到这些情况的时候，一般我们会谷歌，然后我们一般会发现这么些解决办法：

   WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        webSettings.setDomStorageEnabled(true);
        webSettings.setDatabaseEnabled(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setSavePassword(true);
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(true);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);
        webSettings.setUseWideViewPort(true);

确实，上述这些配置，确实可以解决大部分问题，但是，但是，

没错有一种神奇的问题就是白屏问题，我所说的白屏问题不是一般的白屏问题，

周一：晴，我拿了个1200块的Android机用来加载h5页面，点点测测，毫无问题，好，过了过了，

周一晚：由于1200的Android手机被人借走了，只能拿出当年的300块大哥大来测， fuck怎么回事，怎么白屏？不要慌，嗯，肯定是网络的问题，

于是大喊一声，mmp谁在下小电影，赶紧给老子关了，一声吼之后，再次心平气和坐下来，run.... made，怎么回事，怎么还是白屏，莫慌，莫慌，冷汗开始往下流，made，明天要上 uat怎么办,,,,,

于是想到了，反正测试过了，关我鸟事，出问题也是测试抗...........

好了，比装到这里，下面说正事，由于现在h5大部分都是 vue的形式打包，（可能过个一两年就变了，但是万变不离其中），这个时候要注意了，由于是webv加载的h5，在Android老的机型上 webview 内核可能不支持最新的h5 框架，这时候就需要我们找h5 的同学搞事情了，对于 vue，想要老机器不出现白屏其实也很简单，

让h5的同学做一下老版本的兼容，具体方法：

虽然vue-cli引入了babel对js语法进行降级，但是还是有些老旧的机型会发生各种各样的问题，这里需要引入一个叫babel-polyfill的包。所以你只需只在你引入import vue之前 import babel-polyfill进来就可以了，主要是为了让es6对个别机型做到兼容。

好了，到这里就应该差不多了。。。