我们平时在使用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