webview 中使用css适配简单的页面

最新推荐文章于 2025-03-25 19:51:22 发布

SoulOfAndroid

最新推荐文章于 2025-03-25 19:51:22 发布

阅读量6.4k

点赞数

分类专栏： android

本文链接：https://blog.csdn.net/SoulOfAndroid/article/details/47701805

版权

android 专栏收录该内容

117 篇文章

订阅专栏

本文主要探讨在WebView中如何利用CSS进行页面适配，特别关注文字和图片的控制。通过结合meta标签，避免在body内直接设置字体大小，实现更佳的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

package com.example.mycssdemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.webkit.WebSettings;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.webkit.WebView;
import android.webkit.WebViewClient;
/**
 * 类名：MainActivity.java <br>
 * 描述： <br>
 * 创建者： lidongdong <br>
 * 创建日期：2015-8-16
 * 版本： <br>
 * 修改者：<br>
 * 修改日期：2015-8-16
 */
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {
	private WebView mWebView;
	private WebSettings mWebSetting;
	private String content;
	private String linkCss;
	private String html;
        private String　meta；
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mWebView= (WebView) findViewById(R.id.web_view);
		mWebSetting = mWebView.getSettings();
		mWebSetting.setJavaScriptEnabled(true);
		//======================保证页面的完整显示在手机屏幕上=======================
		mWebSetting.setUseWideViewPort(true); 
		mWebSetting.setLoadWithOverviewMode(true); 
		
		mWebSetting.setSupportZoom(true);  
		mWebSetting.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);  
		mWebSetting.setJavaScriptEnabled(true); 
//		mWebView.loadUrl("http://news.dahe.cn/2015/08-11/105436453.html");
　　 
linkCss = "<style type=\"text/css\"> img {" +
				"width:100%;" +
				"height:auto;" +
				"}" +
				"body {" +
				"margin-right:15px;" +
				"margin-left:15px;" +
				"margin-top:15px;" +
				"font-size:45px;" +
				"}" +
				"</style>";
		mWebView.setWebViewClient(new WebViewClient(){
			
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				Log.i("DD", "======="+url);
//				mWebView.loadData(linkCss, "text/html", "utf-8");
				view.loadUrl(url);
				return true;
			}
		});
		
		content = "<p><img src=\"http://img5.imgtn.bdimg.com/it/u=3572074785,265614668&fm=21&gp=0.jpg\">hahahha</p>";
		
		// 加载本地css 不行 不能读取
//		linkCss = "<link rel=\"stylesheet\" href=\"file:///android_asset/img.css\" type=\"text/css\">";

		
		html = "<html><header>" + linkCss + "</header>" + content + "</body></html>";
		
		mWebView.loadData(html, "text/html", "uft-8");
		
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

只对文字和图片做了控制。

（1）结合meta一起来用回比较好。这样不用在body中控制字体的大小。

　meta　＝　“<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>