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

最新推荐文章于 2025-04-08 10:33:10 发布
最新推荐文章于 2025-04-08 10:33:10 发布
阅读量8.7k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yhy123456q/article/details/77714836
版权

一、错误的效果图：


二、正确的效果图：


三、解决方案：

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

四、参考文章：
 

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

 

 


 

                

        

    

  



    

      

        

            

              
                
                  androidyhy
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

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

				
			

			

				

					王二红
				

				

					04-07
					
					6658
					
				

			

		

		

			
				
vue3，移动端网页，输入框弹起软键盘，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，vue3移动端的软键盘对页面css布局影响的解决办法-底部样式被顶起，弹起键盘遮盖输入框键盘弹起后不恢复，键盘不收回，input输入时软键盘弹起不能自动收回，Vue3页面中input输入框弹起软键盘，收起后会导致页面被顶起，无法复原，H5移动端键盘收起后页面上移不复位，软键盘弹出，布局没有上移，弹出软键盘的时候页面顶起不恢复，vue3实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					kerryqpw的博客
				

				

					08-26
					
					2061
					
				

			

		

		

			
				
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

			
		

	





	

		

			

				
					
android webView的使用

				
			

			

				

					m0_47017717的博客
				

				

					03-11
					
					439
					
				

			

		

		

			
				
/ 拦截URL加载@Override// 处理特定URLtry {Toast.makeText(view.getContext(), "未安装应用", Toast.LENGTH_SHORT).show();// 页面加载完成@Override// 注入CSS样式}";

			
		

	



		

			
		



	

		

			

				
					
rem布局在webview中页面错乱

				
			

			

				

					weixin_30650859的博客
				

				

					07-05
					
					475
					
				

			

		

		

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

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_32202001的博客
				

				

					05-28
					
					555
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					简雨山舍
				

				

					12-18
					
					3060
					
				

			

		

		

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

			
		

	





	

		

			

				
					
android webview加载html5乱码解决

				
			

			

				

					zhouguizhi
				

				

					10-22
					
					1261
					
				

			

		

		

			
				
android webview加载html5乱码解决

			
		

	





	

		

			

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

					
最新发布

				
			

			

				

					王二红
				

				

					04-08
					
					5826
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					王二红
				

				

					04-07
					
					4938
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_39079048的博客
				

				

					04-10
					
					2567
					
				

			

		

		

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

			
		

	





	

		

			

				
					
移动端H5常见问题以及解决方案

				
			

			

				

					bufanweb的博客
				

				

					07-16
					
					1551
					
				

			

		

		

			
				
移动端H5常见问题以及解决方案
问题
下面列举了我遇到的一些常规问题,如有遇到其他问题的请在评论区补充,之后我也会实践加以补充,感谢!

以下解决方案,均经过我测试成功,健康安全,请放下食用.由于篇幅问题,某些非核心的解决方案的实现细节暂未谈论,需要的自行研究.

1.iOS滑动不流畅
表现

上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动.整体表现就是滑动不流畅,没有滑动惯性.

产生原因
为什么在iOS的webview中滑动不流畅,它是如何定义的?*
最终我在safari文档里面寻找到了答案(文

			
		

	





	

		

			

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

				
			

			

				

					小码屋
				

				

					08-16
					
					6653
					
				

			

		

		

			
				
在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
					
					2917
					
				

			

		

		

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

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

简单的处理过程


...

			
		

	





	

		

			

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

				
			

			

				

					学无止尽，生命不息..
				

				

					08-30
					
					6810
					
				

			

		

		

			
				
最近项目用到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
					
					3089
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值