Android WebView内容宽度自适应
2016-04-05 11:53
197 查看
我们平常在项目中有可能会遇到网页的内容是通过json数据传递到app上面用WebView来显示的,这时候我们通常都要调整内容的总宽度不超过父容器的宽度,这样子用户可以不用左右滑动就可以看到全部的内容.但是当我遇到这个问题的时候,我是想方设法想达到这个目的,用过WebView里面的很多方法,包括:
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
LayoutAlgorithm是一个枚举用来控制页面的布局,有三个类型:
1.NARROW_COLUMNS:可能的话使所有列的宽度不超过屏幕宽度
2.NORMAL:正常显示不做任何渲染
3.SINGLE_COLUMN:把所有内容放大webview等宽的一列中
用SINGLE_COLUMN类型可以设置页面居中显示,页面可以放大缩小,但这种方法不怎么好,有时候会让你的页面布局走样而且我测了一下,只能显示中间那一块,超出屏幕的部分都不能显示。
//设置加载进来的页面自适应手机屏幕
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
其他的一些方法我也试过了,但是都没达到预期的效果
后来我自己想到了可不可以通过css或者js来控制内容的显示效果,于是使用了css来实现我需要的功能:
1.第一种网上的方法(ps:失败)
WebSettings settings = webView.getSettings();settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
LayoutAlgorithm是一个枚举用来控制页面的布局,有三个类型:
1.NARROW_COLUMNS:可能的话使所有列的宽度不超过屏幕宽度
2.NORMAL:正常显示不做任何渲染
3.SINGLE_COLUMN:把所有内容放大webview等宽的一列中
用SINGLE_COLUMN类型可以设置页面居中显示,页面可以放大缩小,但这种方法不怎么好,有时候会让你的页面布局走样而且我测了一下,只能显示中间那一块,超出屏幕的部分都不能显示。
2.第二种(失败)
//设置加载进来的页面自适应手机屏幕settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
其他的一些方法我也试过了,但是都没达到预期的效果
后来我自己想到了可不可以通过css或者js来控制内容的显示效果,于是使用了css来实现我需要的功能:
3.第三种(成功)
body{ word-wrap:break-word; font-family:Arial; }通过css还可以改变文字的颜色等外观效果,比如:
*{ color:#FF0000; }所以这里写个简单的博客给coder,如果其他方法不行的话,可以试试博主这个方法哦
相关文章推荐
- unity animator 基本属性
- Android 常用 adb 命令总结
- Android判断App前台运行还是后台运行(运行状态)
- Apple开发者账号简介
- 使用XIB, 如何让文字随心所欲的换行
- iOS开发之AFNetworking的使用
- Json.net/Newtonsoft 新特性JObject/Linq to Json
- 告别编译运行 ---- Android Studio 2.0 Preview发布Instant Run功能
- android编译错误之Duplicate file
- Android Studio 使用笔记
- 如何遍历newtonsoft.json的JObject里的JSON数据
- Android 十分方便的EasyRecyclerView
- Android动画(实现抛物线运动)
- Android四种启动模式
- 使用苹果原生API进行二维码和条形码的扫描
- Android自定义实现循环滚轮控件WheelView
- iOS 适配64位系统需要注意什么?
- iOS 保持界面流畅的技巧 (转载)
- iOS学习笔记-TableView性能优化篇1
- ios 集成 支付宝 遇到的各种问题 总结