Android 本地HTML屏幕适配的一种方案

最新推荐文章于 2024-02-27 15:20:05 发布
最新推荐文章于 2024-02-27 15:20:05 发布
阅读量5.4k 收藏 4
点赞数 4
分类专栏： Android 文章标签： android html webview 适配
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuehuayous/article/details/52757204
版权

转载请标明出处：
http://blog.csdn.net/xuehuayous/article/details/52757204
本文出自:【Kevin.zhou的博客】

前言：在Android开发中WebView加载网页，网页的适配应该是前端来处理的，毕竟客户端的对网页的控制是有限的。但是如果有一个本地的网页而且该网页的body是固定宽度的，让我们去适配所有设备还是比较头疼的，当然这种应用场景是很罕见的，尽管如此我们还是讨论下该问题。

通常的网页适配

// 设置加载进来的页面自适应手机屏幕
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);

一般情况下客户端只需要设置如上两行就可以了，当然这两行可以解决绝大部分网页的适配问题。第一行就是设置WebView支持viewpoart，第二行是设置网页超过屏幕宽度时重新布局为屏幕宽度。

如果body设置了确切值

尽管这种在前段开发中是要极力避免的，但有时候为了方便开发还是采用了这种方式。

这里可以采用获取body的值然后根据WebView控件的宽度与body的宽度计算一个比例，然后设置给网页设置一个缩放比例。

JS获取body宽度

  • 定义JS接口
class HTMLWidthInterface {
    @JavascriptInterface
    public void getContentWidth(String value) {
        if (value != null) {
            int bodyWidth = Integer.parseInt(value);
        }
    }
}
  • 设置网页加载后调用JS接口返回body宽度
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new HTMLWidthInterface(), "HTMLWidth");

mWebView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        mWebView.loadUrl("javascript:window.HTMLWidth.getContentWidth(document.body.offsetWidth);");

    }
});

计算缩放比例

private void htmlAdjustWithPageWidth(float bodyWidth, String html, WebView webView) {
    // 计算要缩放的比例
    DisplayMetrics metric = new DisplayMetrics();
    ((Activity)mContext).getWindowManager().getDefaultDisplay().getMetrics(metric);
    float density = metric.density;  // 屏幕密度
    float scale = webView.getMeasuredWidth() / density / bodyWidth;
    String insertText = "<meta name=\"viewport\" content=\"width="+ bodyWidth +"px initial-scale="+ scale
            + ", minimum-scale=0.1, maximum-scale=10.0, user-scalable=no\"/>";
    insertBehindText(new File(html), "<head>", insertText);
}

在HTML插入viewpoart信息

/**
 * 在指定文本之后插入一段文本
 *
 * @param file
 * @param targetStr
 * @param insertStr
 * @return void:
 * @version 1.0
 * @date 2015-9-2
 * @Author zhou.wenkai
 */
public void insertBehindText(File file, String targetStr, String insertStr) {
    BufferedReader  bufr = null;
    BufferedWriter  bufw = null;
    try {
        InputStreamReader isr = new InputStreamReader(new FileInputStream(file), "UTF-8");
        bufr = new BufferedReader(isr);
        StringBuffer buf = new StringBuffer();
        String line = null;

        while ((line = bufr.readLine()) != null) {
            // 保存原文本
            buf = buf.append(line);
            // 保存要插入文本
            if(line.contains(targetStr)) {
                buf.append(insertStr);
            }
            // 添加换行符号
            buf = buf.append(System.getProperty("line.separator"));
        }
        OutputStreamWriter osw = new OutputStreamWriter(new FileOutputStream(file),"UTF-8");
        bufw = new BufferedWriter(osw);
        bufw.write(buf.toString());
        bufw.close();

    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        try {
            if(bufr != null) {
                bufr.close();
            }
            if(bufw != null) {
                bufw.close();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

源码

public class MainActivity extends AppCompatActivity {

    private final static String TAG = "WebViewContentWidth";
    private WebView mWebView;
    String path = Environment.getExternalStorageDirectory().getPath() + "/temp/HYLNK01/第一节_自我测试1.html";
//        path = Environment.getExternalStorageDirectory().getPath() + "/temp/HYLNK02/首页.html";
//        path = Environment.getExternalStorageDirectory().getPath() + "/temp/HYLNK03/home.html";;
    Context mContext;

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = this;

        mWebView = (WebView) this.findViewById(R.id.main_act_wv);

        // 设置不可缩放
        mWebView.getSettings().setBuiltInZoomControls(false);
        mWebView.getSettings().setSupportZoom(false);
        mWebView.getSettings().setDisplayZoomControls(false);

        // 设置支持屏幕适配
        mWebView.getSettings().setUseWideViewPort(true);
        mWebView.getSettings().setLoadWithOverviewMode(true);

        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.addJavascriptInterface(new HTMLWidthInterface(), "HTMLWidth");

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                mWebView.loadUrl("javascript:window.HTMLWidth.getContentWidth(document.body.offsetWidth);");

            }
        });

        mWebView.loadUrl("file://" + path);
    }

    class HTMLWidthInterface {
        @JavascriptInterface
        public void getContentWidth(String value) {
            if (value != null) {
                int bodyWidth = Integer.parseInt(value);
                boolean hasChanged = isContainsText(new File(path), "<meta name=\"viewport\"");
                if(!hasChanged) {
                    htmlAdjustWithPageWidth(bodyWidth, path, mWebView);
                    mWebView.loadUrl("file://" + path);
                }
            }
        }
    }

    private void htmlAdjustWithPageWidth(float bodyWidth, String html, WebView webView) {
        // 计算要缩放的比例
        DisplayMetrics metric = new DisplayMetrics();
        ((Activity)mContext).getWindowManager().getDefaultDisplay().getMetrics(metric);
        float density = metric.density;  // 屏幕密度
        float scale = webView.getMeasuredWidth() / density / bodyWidth;
        String insertText = "<meta name=\"viewport\" content=\"width="+ bodyWidth +"px initial-scale="+ scale
                + ", minimum-scale=0.1, maximum-scale=10.0, user-scalable=no\"/>";
        insertBehindText(new File(html), "<head>", insertText);
    }

    /**
     * 在指定文本之后插入一段文本
     *
     * @param file
     * @param targetStr
     * @param insertStr
     * @return void:
     * @version 1.0
     * @date 2015-9-2
     * @Author zhou.wenkai
     */
    public void insertBehindText(File file, String targetStr, String insertStr) {
        BufferedReader  bufr = null;
        BufferedWriter  bufw = null;
        try {
            InputStreamReader isr = new InputStreamReader(new FileInputStream(file), "UTF-8");
            bufr = new BufferedReader(isr);
            StringBuffer buf = new StringBuffer();
            String line = null;

            while ((line = bufr.readLine()) != null) {
                // 保存原文本
                buf = buf.append(line);
                // 保存要插入文本
                if(line.contains(targetStr)) {
                    buf.append(insertStr);
                }
                // 添加换行符号
                buf = buf.append(System.getProperty("line.separator"));
            }
            OutputStreamWriter osw = new OutputStreamWriter(new FileOutputStream(file),"UTF-8");
            bufw = new BufferedWriter(osw);
            bufw.write(buf.toString());
            bufw.close();

        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                if(bufr != null) {
                    bufr.close();
                }
                if(bufw != null) {
                    bufw.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 检查是否包含制定文本
     *
     * @param file
     * @param containsStr
     * @return
     * @return boolean:
     * @version 1.0
     * @date 2015-10-28
     * @Author zhou.wenkai
     */
    public boolean isContainsText(File file, String containsStr) {
        BufferedReader bufr = null;
        try {
            InputStreamReader isr = new InputStreamReader(new FileInputStream(file), "UTF-8");
            bufr = new BufferedReader(isr);
            String line;

            while ((line = bufr.readLine()) != null) {
                if(line != null && line.contains(containsStr)) {
                    return true;
                }
            }

        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                if(bufr != null) {
                    bufr.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return false;
    }
}
周文凯
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android 处理HTML-HTML适配屏幕.pdf
07-10
Android 处理HTML-HTML适配屏幕.pdf 学习资料 复习资料 教学资源
安卓 webview加载html图片自适应手机屏幕大小和点击查看大图
weixin_39621897的博客
03-14 1002
我们在开发中，显示信息详情时，一般后台会给出html文本，在android端一般采用webview控件来展示，但是后台给出的html文本一般是给电脑端用的，没有自适配手机，导致手机端图片显示过大，需要左右移动来查看全图。下面给出几种实用方法，达到在手机端用webview展示html中的图片，能自适应手机屏幕展示。需要用webview控件进行展示html文本，为使文字也自适应手机屏幕大小，需要先对a...
关于前端blob协议下载，wkwebview相关适配整理知识整理
最新发布
lingjunjie的博客
02-27 402
关于前端blob协议下载，wkwebview相关适配整理知识整理
Android WebView设置图片自适应屏幕宽度 及 加载本地图片
jinrumorijuesha的博客
02-27 3949
在开发中，有时候我们需要加载html中的数据，当html中的各个元素宽高都已经设置好了的情况下，我们可以直接用WebView加载，但是也有时候html各个标签的宽高是不正常的，特别是图片。以下介绍WebView设置加载的网络图片自适应宽高的3种方法，以作记录. 方法一、WebView加载url 该方法使用js来设置，在Webview的setWebViewClient()方法中WebViewClie...
Android屏幕适配
UrasakiNakajima的博客
06-07 1091
Android开发中，Android屏幕适配是一件很棘手的事，需要注意的几点：尽量使用线性布局（LinearLayout)和相对布局(RelativeLayout)，不要使用绝对布局；尽量使用dip和sp，不要使用px；为不同的分辨率提供不同的布局文件和图片；在AndroidMainfest.xml中设置多分辨率支持。 ...
flutter html去掉上下边距，不占一行，宽度自适应
weixin_44911775的博客
05-06 455
shrinkWrap: true：宽度是多大就是多大，跟随内容宽度。设置"html"和"body"就是为了去掉上下左右的边距。
android 获取屏幕宽度_HTML让网页自动适应电脑手机屏幕大小
weixin_39623050的博客
11-25 261
制作的网页除了在PC端浏览，在现在移动端量巨大的时代下，如何做好PC端与移动端的自适应，是每个程序必须要需要考虑的事情。举例下面是没有加适应的情况：PC端：移动端(iPhone 6/7/8为例)：可见在移动端非常不便于阅读！解决方案在网页的中增加以下代码，让网页的宽度自动适应手机屏幕的宽度width=device-width ：表示宽度是设备屏幕的宽度height=device-height ：表...
Android WebView内容宽度自适应
小金子的专栏
04-05 1万+
我们平常在项目中有可能会遇到网页的内容是通过json数据传递到app上面用WebView来显示的,这时候我们通常都要调整内容的总宽度不超过父容器的宽度,这样子用户可以不用左右滑动就可以看到全部的内容.但是当我遇到这个问题的时候,我是想方设法想达到这个目的,用过WebView里面的很多方法,包括: 1.第一种网上的方法(ps:失败) WebSettings settings = we
Android WebView加载Html 解决图片自适应屏幕宽度问题
倚栏静望的博客
10-18 1724
开发中，经常需要加载html数据，当html中的各个元素宽高都已经设置好了的情况下，我们可以直接用WebView加载，但是也有时候html各个标签的宽高是不正常的，特别是图片，因此怎么处理图片宽高是一个难题，经过多年采坑的经验，以下这种方式是最有效的： val head = "<head>" + "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, u
Android H5视频全屏,自适应视频
qq_33902817的博客
10-27 2995
Android H5视频全屏自适应操作.
android webview加载html 适配,完美解决WebView加载HTML代码适配问题
weixin_42372573的博客
05-27 1502
1、WebView不会自动换行，它会把连在一起的字母当成一个表情或者单词，或者，当遇到一个完整的URL链接时，会强制把URL放在一行,导致WebView可以左右滑动解决方法：这中问题不是WebView设置能够解决的，我们需要改动HTML的代码,在返回的HTML代码前直接拼接下边代码：//就是有时候web view不会自动换行，它会把连在一起的字母或者表情当作是一个单词，// 直接显示在后面，不自动...
TextView完美实现HTML标签数据（支持图片适配屏幕以及图片点击）
06-12
通过TextView实现了对于HTML数据的实现，并且实现了标签中的图片居中跟缩放到最适宽度以及图片的点击查看。
Android屏幕适配主流方案的对比和集成
03-25
屏幕适配主流方案的文档说明，包含word和pdf
Android 屏幕适配方案
04-06
作者l123456789jy，源码AutoAndroidLayout，AutoAndroidLayout Android屏幕适配方案，直接填写设计图上的像素尺寸即可。 详细说明：http://android.662p.com/thread-6934-1-1.html
Android的分辨率和屏幕适配详解
09-01
对于刚接触Android的新人和刚走上Android技术岗位的开发者们来说，在熟悉了相关之后，在项目完成后，就会面临着一个重大的挑战，那么就是屏幕适配的问题。当然我们所说的屏幕适配指的是适配各种手机不同的分辨率。
Android-屏幕适配需要注意的地方总结
09-05
需要注意一下几个地方:尽量使用线性布局/尽量使用dip和sp，不要使用px/为不同的分辨率提供不同的布局文件和图片，接下来为你详细介绍下，感兴趣的你可以参考下哈，希望可以帮助到你
android 屏幕适配方案小工具（可执行jar包）
04-07
android 屏幕适配方案小工具（可执行jar包）
Android 拍照、选择图片并裁剪
热门推荐
zwenkai
05-05 4万+
前言：前段时间做项目用到了图片裁剪，调用系统裁剪图片，结果在我的小米3上一直有问题，裁剪界面打不开，在其他设备上没问题，于是研究其他软件是怎么做的，淘宝的裁剪图片是自己做的，当然没问题，京东的是调用的系统的也是打不开裁剪界面。但是不知道为什么会出现这个问题，在其他小米设备上貌似没有问题。看来调用系统的裁剪图片还是不靠谱的。 一、 uCrop项目应用
Android 上传图片到JavaWeb服务器
zwenkai
05-19 2万+
前言：在上一篇博客《Android 拍照、选择图片并裁剪》中主要说明了在Android中图片裁剪的一种方式，当然我们裁剪图片的最终目的是为了上传服务器，最常用的是设置用户头像。即用户在客户端拍照或者选择图片后上传服务器，服务器返回图片在服务器的地址，然后再携带用户信息与头像地址发送请求到服务器修改用户信息。或者上传图片到服务器的时候即携带用户信息，这样一次网略请求就可以搞定了。要根据不同的需求灵活
Android 屏幕适配
06-10
Android屏幕适配是指根据不同设备的屏幕尺寸、分辨率、像素密度等因素，使App在不同设备上显示效果基本一致。...以上是Android屏幕适配的一些常用方式和方案，开发者可以根据实际情况选择适合自己的适配方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值