webview 中使用css適配簡單的頁面
阿新 • • 發佈：2018-12-26
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"/>