WebView 内容自适应自己亲自试验

最新推荐文章于 2022-09-03 23:05:39 发布

ManLikeTheWind

最新推荐文章于 2022-09-03 23:05:39 发布

阅读量1.4k

点赞数

分类专栏： webview

本文链接：https://blog.csdn.net/a2241076850/article/details/54599271

版权

webview 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.修改html的标签内容，

<body style="word-wrap:break-word;font-family:Arial;">

1.2 方法二，我试验了 android中没有效果，ios中有效果，个人建议使用第一种方法，

 <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

然后在java中设置WebView：webSettings.setUseWideViewPort(true); 关键点

	@SuppressLint("SetJavaScriptEnabled")
	private void initWebView(WebView webView) {
		String url = "file:///android_asset/mail_my_v5.html"; // js代码写在mail_detail.html里
		// String url="file:///android_asset/mail_detail_v4.html";
		// //js代码写在mail_detail.html里
		// String
		// url="file:///android_asset/"+getResources().getString(R.string.mail_detail_v2);
		// //js代码写在mail_detail.html里

		setOnWebClick(mWebView);

		WebSettings webSettings = mWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);

		webSettings.setBuiltInZoomControls(true); // 原网页基础上缩放 //0
		webSettings.setSupportZoom(true);// 支持缩放 //0
		webSettings.setDisplayZoomControls(false);// 不显示webview缩放按钮1
		// setting.setDefaultZoom(ZoomDensity.FAR);
		webSettings.setUseWideViewPort(true);  关键点
		// mWebView.setInitialScale(39);//适应全屏： 39适应竖屏 57适应横屏；0默认的，不做任何修改 ；

		// //设置双击变大，再双击变小，当手动放大后，双击可以恢复到原始大小，设置如下
		// webSettings.setTextZoom(80);//字体大小 WebSettings wb;

		webSettings.setDefaultTextEncodingName("utf-8");

//		mWebView.addJavascriptInterface(getHtmlObject(), "jsObj");// 对象的大小写一定要注意
		new Thread(){
			public void run() {
				mH.obtainMessage(200, getHtmlObject()).sendToTarget();
			}
		}.start();
		mWebView.loadUrl(url);

	}

2.div 和 p等标签的内容强制换行，自定义 CSS样式，

punch-line{
        	word-warp:break-word;
			word-break:break-all;
        }.rececc-padding{
            padding-right: 2.0rem;
        }.as-nolines{
        	max-width:100%; 
            overflow-x: hidden;
            text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            -webkit-text-overflow: ellipsis;
            white-space: nowrap;
        }.as-80nolines{
        	max-width:100px; 
            overflow-x: hidden;
            text-overflow: clip;/*剪切  不以...作为结尾*/
            -ms-text-overflow: clip;
            -o-text-overflow: clip;
            -webkit-text-overflow: clip;
            white-space: nowrap;
        }.div-inline{
        	float:left;/*div并排*/
        }

然后在对应的标签的 class 中的

<a class="btn-link pull-right" id="receive-open" οnclick="openPanel(this, 1)">展开</a>

ManLikeTheWind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebView 内容自适应自己亲自试验

1.修改html的标签内容，1.2 方法二，我试验了 android中没有效果，ios中有效果，个人建议使用第一种方法，然后在java中设置WebView：webSettings.setUseWideViewPort(true); //// 关键点 @SuppressLint("SetJavaScriptEnabled") private void initWebView(We
复制链接

扫一扫