Android WebView加载网页,图片等元素宽度大小不兼容手机屏幕的宽度
无论是Android手机还是iOS手机,使用WebView加载一些没有专门为手机屏幕做适配的网页的时候,就会出现网页中的图片等标签元素的宽度大小和手机屏幕的宽度不一致的情况,如下图
之所以会出现上面的情况,是因为网页中的dom元素大小没有适配到移动网页中,有些元素是把宽度固定死的
解决办法有很多:
- 前端人员将网页适配到移动端(优点:最为规范的做法 缺点:一些不再维护的项目,是没有前端人员来适配)
- 移动端开发人员自己通过JS的注入来修改(优点:在缺乏前端人员的支持下,可以勉强这样做 缺点:元素变化的话,Native需要修改各种JS函数)
现在重点就说下第二种方法:
首先在Android和iOS这两个平台,WebView可以和Native进行交互的,在Native中编写JS函数注入到html中,也可以在网页调用Native的函数。
这里我就简单讲一下通过JS注入到html中,来改变相应元素的大小,以及字体等,Android和iOS都有WebView,都可以监听监听网页的加载的过程,在Android中通过WebViewClient来监听网页的加载过程,一般我们需要在网页所有资源加载完成后,也就是onPageFinish的方法中,注入JS,废话不多说,直接看代码:
package com.example.webviewdemo; import android.content.Context; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.DisplayMetrics; import android.util.Log; import android.view.WindowManager; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; public class MainActivity extends AppCompatActivity { private static final String TAG = "WebView"; private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = findViewById(R.id.webView); initWebSettings(); webView.loadUrl("http://www.ah12377.cn/newsDetail/151"); //监听WebView是否加载完成网页 webView.setWebViewClient(new WebViewClient(){ @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); Log.d(TAG,"onPageFinished"); loadJS(); } }); } private void loadJS(){ webView.loadUrl("javascript:(function(){" //将DIV元素中的外边距和内边距设置为零,防止网页左右有空隙 + " var divs = document.getElementsByTagName(\"div\");" + " for(var j=0;j<divs.length;j++){" + " divs[j].style.margin=\"0px\";" + " divs[j].style.padding=\"0px\";" + " divs[j].style.width=document.body.clientWidth-10;" + " }" + " var imgs = document.getElementsByTagName(\"img\"); " + " for(var i=0;i<imgs.length;i++) " + " {" //过滤掉GIF图片,防止过度放大后,GIF失真 + " var vkeyWords=/.gif$/;" + " if(!vkeyWords.test(imgs[i].src)){" + " var hRatio="+getScreenWidthPX()+"/objs[i].width;" + " objs[i].height= objs[i].height*hRatio;"//通过缩放比例来设置图片的高度 + " objs[i].width="+getScreenWidthPX()+";"//设置图片的宽度 + " }" + "}" + "})()"); } /** * WebView Setting */ private void initWebSettings(){ WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); // webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); } /** * 获取屏幕的宽度(单位:像素PX) * @return */ private int getScreenWidthPX(){ WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE); DisplayMetrics dm = new DisplayMetrics(); if (wm != null && wm.getDefaultDisplay() != null){ wm.getDefaultDisplay().getMetrics(dm); return px2dip(dm.widthPixels); }else { return 0; } } /** * 像素转DP * @param pxValue * @return */ public int px2dip(float pxValue) { float scale = this.getResources().getDisplayMetrics().density; return (int) (pxValue / scale + 0.5f); } }
代码非常简单,效果图如下,通过上面的代码可以知道,我们可以通过JS来修改html的任何元素,也可以去掉或者隐藏html中的元素等,当然也要懂点JS和html的开发,才能更好地下手,当然这个过程使用Chrome浏览器的调试面板也很重要
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Android扩大点击事件接收区域范围
Android扩大点击事件接收区域范围 如果有些icon或者ImageView,这些View本身很小,就扩大这些事件的接收区域。直接传入需要扩大事件接收区域的view,也可以自定义指定扩大多少尺寸size。默认到的方法是在原View四周增加20pix。 public static void expandTouchArea(View view) { setTouchDelegate(view, 20); } public static void expandTouchArea(View view, int size) { View parentView = (View) view.getParent(); parentView.post(new Runnable() { @Override public void run() { Rect rect = new Rect(); view.getHitRect(rect); rect.top -= size; rect.bottom += size; rect.left -= size; rect.right += size; parent...
- 下一篇
Spring Reactor 项目核心库
Reactor Core Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactive Extensions inspired API and efficient event streaming support. Getting it Reactor 3 requires Java 8 or + to run. With Gradle from repo.spring.io or Maven Central repositories (stable releases only): repositories { // maven { url 'http://repo.spring.io/snapshot' } maven { url 'http://repo.spring.io/milestone' } mavenCentral() } dependencies { //compile "io.projectreactor:reactor-core:3.1.4.RELEASE" //te...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- Mario游戏-低调大师作品
- CentOS关闭SELinux安全模块
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池