android webview 电脑网页适应手机屏幕

我们平时在使用webview加载网页的时候可能出现网页超出屏幕的情况，特别是手机在加载PC网页的时候，基本上都会出现屏幕不适配的情况。网上搜一下大多是使用如下方法：

webSettings.setUseWideViewPort(true)
webSettings.setLoadWithOverviewMode(true) 

这两行代码确实可以在手机屏幕内显示整张电脑网页，但是有一个问题，就是网页内的字体会被缩小，影响用户体验。遇到这种问题，作为没有前端开发经验的我来说只能再去网上搜各种资料。终于搜到一个比较靠谱的，可能对于前端工程师来说是件很简单的事情。就是使用css。
具体内容如下。

网页宽度自动调整到手机宽度

其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

调整网页字体大小

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body { font: normal 100% Helvetica, Arial, sans-serif; }  

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 { font-size: 1.5em; }  

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small { font-size: 0.875em; }  

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

调整image大小

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

参考

http://stackoverflow.com/questions/5448841/what-do-setusewideviewport-and-setloadwithoverviewmode-precisely-do
http://mobile.51cto.com/ahot-409516.htm