如何实现webview 上网页能进行自动适应手机屏幕大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现webview 上网页能进行自动适应手机屏幕大小相关的知识，希望对你有一定的参考价值。
参考技术A stackoverflow 上做法：webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);觉得这个好用本回答被提问者和网友采纳 参考技术B 方法1,建立不同分辨率的网页 。
方法2,以800*600建立网页,用表格限制宽度,在1024*768的时候就空出两边来了。
一般都用方法2,只要表格限定了就不会错位了 。
方法3,用css控制字体。不要用图层做网页 。
用CSS好。
要是不会CSS的话到网上下载一个别人网页的CSS文件，把里面的网址换上自己的就可以了。
如何实现手机自动适应网页
将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单，可以利用meta标签声明。
一方法/步骤
-
打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。
-
向浏览器声明该网页为移动设备自适应网页的meta标签为：
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
将以上标签加入之后保存，再用手机打开即是自适应网页了。
二方法/步骤
-
方法：在网页头部加上这样一条meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
解释：
width=device-width ：宽度等于设备屏幕的宽度
initial-scale=1.0：表示：初始的缩放比例
minimum-scale=0.5：表示：最小的缩放比例
maximum-scale=2.0：表示：最大的缩放比例
user-scalable=yes：表示：用户是否可以调整缩放比例
-
另外：如果想控制字体的大小的话，应该使用相对大小，可以用下面这段代码，一般不用也可，这里只是说名一种方法。
相对大小的字体
字体也不能使用绝对大小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）。
以上是关于如何实现webview 上网页能进行自动适应手机屏幕大小的主要内容，如果未能解决你的问题，请参考以下文章