Android原生webView加载h5页面出现加载错乱不完全问题

最新推荐文章于 2025-06-19 10:56:36 发布
最新推荐文章于 2025-06-19 10:56:36 发布
阅读量8.7k 收藏
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yhy123456q/article/details/77714836
本文介绍了WebView中遇到的DOM存储失效问题及其解决方法。通过对比错误与正确的效果图，详细展示了如何启用DOM存储API来解决问题。

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

一、错误的效果图：


二、正确的效果图：


三、解决方案：

webView.getSettings().setDomStorageEnabled(true);//打开DOM存储API
 

四、参考文章：
 

地址：点击打开链接 http://blog.youkuaiyun.com/u010753376/article/details/51394304
 

 

 


 

                

        

    

    
  



    

      

        

            

              
                
                  androidyhy
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
解决 Android WebView 无法加载 H5 页面常见问题的实用指南

				
			

			

				

					s13596191285的博客
				

				

					03-07
					
					2740
					
				

			

		

		

			
				
Android WebView 加载 H5 页面时，常见问题包括空白页、资源加载失败、性能问题、交互失效及重定向问题。本文提供了详细的排查思路及解决方案，开发者可以根据具体情况进行优化和调整，确保 WebView 能够顺利加载 H5 页面并提供流畅的用户体验。然而，在不同设备、不同系统版本下，WebView 可能会出现 H5 页面加载失败、白屏、样式错乱、资源加载失败等问题。本文将深入剖析这些问题的原因，并提供实用的解决方案。此外，前端可优化页面，减少不必要的 JS 执行，提高 H5 渲染性能。

			
		

	



                

            
              



	

		

			

				
					
Android 以webview的方式集成Dcloud h5+SDK

				
			

			

				

					kerryqpw的博客
				

				

					08-26
					
					2080
					
				

			

		

		

			
				
Android 以webview的方式集成Dcloud h5+SDK

 

        app开发中经常会有，通过AndroidApp和IOSApp调用h5Html的页面功能，主要调用两方面功能

1、界面展示，数据通信工

2、android、ios底层的功能

        实现步骤：

1、通过mui构建webApp,

2、android和iOS集成SDK,通过webView（链接...

			
		

	



              


  
              

                


	

		

			

				
					
Android WebView 个别手机显现不全的问题

				
			

			

				

					09-27
				

			

		

		

			
				
最近做项目过程中，遇到到webview 的各种奇葩问题，相信搞Android开发的也遇到不少webview的适配问题吧，但是前几天遇到webview加载一半的情况，我去，怎么会加载一半呢，太气人了，也没有报错，网上各种搜，但并没有很好的解决问题。最后终于想到了一个本方法，可以解决显示不全的问题，加载的是html,不是url

			
		

	





	

		

			

				
					
rem布局在webview中页面错乱

				
			

			

				

					weixin_30650859的博客
				

				

					07-05
					
					490
					
				

			

		

		

			
				
你有没有遇到过如下这种问题（页面错乱）：查看代码，html的font-size设置正常，在浏览器和绝大部分手机上也正常，但是在某些手机上页面元素为什么就大了或小了呢？是rem布局不准了吗？
非也，其实是系统字体大小的问题，这类问题常见于安卓设备上，而且是内嵌在APP里面的H5页面。

问题因素出现这个问题有几个因素： 1.用rem布局的H5页面 2.页面内嵌在APP的webview中 3....

			
		

	



		

			
		



	

		

			

				
					
构建通用Android WebView的实战指南

					
最新发布

				
			

			

				

					weixin_35238815的博客
				

				

					06-19
					
					892
					
				

			

		

		

			
				
在现代移动应用开发中，WebView组件扮演了至关重要的角色，它允许开发者在Android应用中直接嵌入网页，提供了丰富多样的信息呈现方式和交互模式。WebView组件不仅仅是一个简单的浏览器窗口，它更是一个强大的容器，能够在应用中直接显示网页内容，实现网页与本地应用的无缝结合。要开始使用WebView，首先需要在项目的文件中添加对应的依赖库，并在AndroidManifest.xml中声明Internet权限，以允许WebView访问网络资源。

			
		

	





	

		

			

				
					
android webview 有时变乱,Android WebView.loadDataWithBaseURL首页加载乱七八糟。如何解决它？...

				
			

			

				

					weixin_32202001的博客
				

				

					05-28
					
					570
					
				

			

		

		

			
				
我使用WebView.loadDataWithBaseURL从我的应用程序的内部资源加载我的帮助页面。Android WebView.loadDataWithBaseURL首页加载乱七八糟。如何解决它？我有help.html和位于资产目录中的几张图片。该页面加载和显示图像，但图像周围的文字是一团糟。它没有显示在图像的右侧，而是图像与文本重叠。这只发生在第一次加载页面。如果我关闭WebView并再次...

			
		

	





	

		

			

				
					
android通过webView加载第三方h5应用，无法加载图片和播放视频的解决方法

				
			

			

				

					简雨山舍
				

				

					12-18
					
					3107
					
				

			

		

		

			
				
只需给webview的配置中加上下面这段代码即可解决 
这是http与https重定向的问题导致 
因为从Android5.0开始，WebView默认不支持同时加载Https和Http混合模式。项目里面图片的地址和视频的地址是https的，而项目所在的域名为http的，所以跟安卓小伙伴沟通加上下面一段代码，完美解决if(Build.VERSION.SDK_INT >= Build.VERSION_C

			
		

	





	

		

			

				
					
android webview加载html5乱码解决

				
			

			

				

					zhouguizhi
				

				

					10-22
					
					1271
					
				

			

		

		

			
				
android webview加载html5乱码解决

			
		

	





	

		

			

				
					
Vue2 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）

				
			

			

				

					资深程序员
				

				

					04-07
					
					6163
					
				

			

		

		

			
				
vue，移动端网页，输入框弹起软键盘，布局没有上移，弹出软键盘的时候页面顶起不恢复，实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法，vue h5页面软键盘遮挡等，软键盘顶起页面，H5，input输入时，软键盘弹起不能自动收回，移动端软键盘监听弹出收起及影响定位布局，H5-input弹起键盘遮盖输入框，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，移动端的软键盘对页面css布局影响的解

			
		

	





	

		

			

				
					
uniapp - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）

				
			

			

				

					资深程序员
				

				

					04-08
					
					6137
					
				

			

		

		

			
				
uniapp，微信公众号网页，h5移动端开发，uniapp h5平台输入框弹起软键盘，收起后导致页面无法复原的问题，uniApp输入框弹起软键盘，收起后导致页面无法复原的问题，uniapp移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起，弹起键盘遮盖输入框键盘弹起后不恢复，键盘不收回，input输入时软键盘弹起不能自动收回，UNI-APP页面中input输入框弹起软键盘，收起后会导致页面被顶起，无法复原，H5移动端键盘收起后页面上移不复位，软键盘弹出，布局没有上移，弹出软键盘的时候页面顶起不恢复

			
		

	





	

		

			

				
					
WebView之性能优化，优化加载速度，缓存机制详解，解压服务器！

				
			

			

				

					weixin_39079048的博客
				

				

					04-10
					
					2588
					
				

			

		

		

			
				
首先先声明一下工作中遇到的问题，我们项目在晚上九点的时候，是一个高峰期。由于服务器高并发没有优化好，在短时间内要做一下解决方案。还有一个是优化加载webview的加载速度。这个放在后面说。场景，晚上九点，是用户活跃高峰期，导致原生App端，打开H5页面，需要请的CSS和JS这些文件特别的慢，所有H5页面会在App上显示布局错乱，显示有问题等情况！以下做出了几种方案。（当然后台解决高并发是核心关键第一

			
		

	





	

		

			

				
					
Android 解决系统字体变大导致WebView页面显示错乱问题

				
			

			

				

					小码屋
				

				

					08-16
					
					6702
					
				

			

		

		

			
				
在WebView开发过程中，当用户手动修改系统字体变大时，部分手机会出现WebView页面错乱问题。

为了解决这个问题，需要对WebView进行一个设置。在页面加载之前加上一下代码：


webview.getWebSetting().setTextZoom(100);


设置了这个就可以正常显示了。...

			
		

	





	

		

			

				
					
最新Android WebView Websettings设置，  Android WebView加载网页布局错乱， 在Android4.4新版本之后WebSettings新增设置。

				
			

			

				

					门徒07的博客
				

				

					07-09
					
					1万+
					
				

			

		

		

			
				
两张图片对比后，你会发现第一张加载web网页的布局乱了。原因：Android4.4(API 版本 19) 提供了一个基于 Chromium 版本的新版本 WebView，不再是webkit了。所以在对websettings的设置中我们需要多添加如下设置：WebSettings settings = webView.getSettings();
settings.setUseWideViewPort

			
		

	





	

		

			

				
					
webview设置导致app内嵌网页布局乱掉的其中一种问题解决

				
			

			

				

					weixin_34319374的博客
				

				

					05-21
					
					2955
					
				

			

		

		

			
				
对app内嵌网页接触不多，这里描述的是一种内嵌网页布局乱掉的可能原因：
关键字：“webview控件”、“setUseWideViewPort属性”、“meta标签”
参考文章：
Android开发填坑之setUseWideViewPort
情景

近期接到一个bug反馈，说一份网页代码放在一个第三方提供的app内显示布局乱掉了，但是这份代码在手机端浏览器是可以正常显示的；

简单的处理过程


...

			
		

	





	

		

			

				
					
【解决方案Webview】H5弹出对话框，部分机型显示错位问题！

				
			

			

				

					学无止尽，生命不息..
				

				

					08-30
					
					6845
					
				

			

		

		

			
				
最近项目用到Webview ，这真是一个比天还大的坑，不停遇到各种奇葩问题。昨天测试就报了个在华为T9510E 版本4.0.4上出现H5弹出对话框错位问题。


如下图：









而在我的华为P8上显示正常。这个问题先让前端去看了一下，但没什么结果，很快产品说出现问题的手机，用自带浏览器打开没问题。


此刻矛头一下就指向了客户端，经过我不断的调试，最终发

			
		

	





	

		

			

				
					
android9之前（android8以及之前）的版本WebView不兼容H5部分界面，发生白屏的处理办法。

					
热门推荐

				
			

			

				

					灰色系男孩的博客
				

				

					03-27
					
					1万+
					
				

			

		

		

			
				
背景：app需要用H5加载一个WebView网页，百度和淘宝等都可以加载，但是公司的前端写的部分H5无法加载成功，出现白屏。这个问题出现在android9之前，android9以及以后的版本呈现正常。查资料尝试过关闭掉硬件加速和setDomStorageEnabled 没效果。


webView.getSettings().setDomStorageEnabled(true);

后面用手机模拟器和云真机测试过很多机器，发现有极少数的android8机器上面不会出现白屏。所以就怀疑根本原因不是androi

			
		

	





	

		

			

				
					
webView加载做了适配h5页面超出屏幕问题

				
			

			

				

					aino0613的博客
				

				

					08-20
					
					1万+
					
				

			

		

		

			
				
最近在做android与h5的交互，前端给了一个做了适配的页面，然后我webView加载出来的时候页面超出了手机屏幕宽度，如下图 
 


然后去网上查了关于webView适配的一些信息，基本给出的都是如下几种

settings.setUseWideViewPort(true);  
settings.setLoadWithOverviewMode(true);  
settings.setLa...

			
		

	





	

		

			

				
					
android内嵌h5界面展示不全以及部分按钮不能触发点击事件

				
			

			

				

					lnny的博客
				

				

					01-12
					
					3107
					
				

			

		

		

			
				
造成这个的原因是：使用HTML5 DOM存储，不会主动加载到Android WebView中

解决方法：设置上这个属性即可
webView.getSetting()..setDomStorageEnabled(true); 表示打开dom存储API

			
		

	





	

		

			

				
					
android webview 更新,Android WebView缓存没更新解决方案

				
			

			

				

					weixin_39896839的博客
				

				

					05-26
					
					4349
					
				

			

		

		

			
				
一：现象客户端加载过H5页面A，后来H5修改为A'发布之后，在很长一段时间内，客户端一直展示的是A，没有更新为A'。重启之后依然没有更新，只有清除缓存或者重装APP才会更新。二：分析根据现象得出，是由于webview的缓存导致页面一直没有更新。但是为什么没有更新？更新的机制是什么？应该怎么修改？首先看下客户端的缓存机制，CacheMode一共有五种CacheMode {// 如果页面没有强制任何特...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值