点滴积累，缓缓蜕变
示意图1.png
对于viewport的理解
viewport我们暂且称它为可视窗口，一般情况下是指我们的移动端利用webview加载网页的时候，能够给这个网页提供多大的一个显示范围。
直接加载一个HTML页面
我这里选择了加载assets文件夹中的一个html页面，websetting先暂时什么也不用设置，直接加载当我们用webview加载一个html页面时，
mWebView = (WebView) findViewById(R.id.webview);
mWebView.loadUrl("file:///android_asset/webview_test.html");
那么将这样显示：
示例图2.png
这似乎是在说明，默认情况下是不支持viewport属性的。由于我没有设置s.setUseWideViewPort(true);，所以默认情况下，是不会去加载html文件中的<mate name="viewport"/>这个节点的。html文件中head标签如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1000, initial-scale=1">
<title>例子</title>
</head>
因为只是为了测试是否加载meta节点，所以给width设置了1000，这样可以看出变化，因为当不设置setUseWideViewPort()方法时，该webview显示网页的范围就是手机屏幕，当设置了setUseWideViewPort(true)时，这个时候就会去加载html中的
<meta name="viewport" content="width=1000, initial-scale=1">
这时我们可以猜测一下：加载后给可视窗口设置了1000px的宽度。这时肯定就会大于手机屏幕的宽度，底部就应该会出现滑动条
加载HTML页面时设置viewport属性
于是乎我们来设置viewport属性
mWebView = (WebView) findViewById(R.id.webview);
WebSettings s = mWebView.getSettings();
s.setUseWideViewPort(true);
mWebView.loadUrl("file:///android_asset/webview_test.html");
情况就变成这样
示例图3.png
示例图4.png
注意底部可以滑动了。这样就说明了上面的猜测是正确的，因为加载网页的可视窗口的宽度为1000px，那么就得滑动屏幕才能显示完全。
设置一个超屏自动缩放的属性
当再多设置一个以下属性时，显示如下：
WebSettings s = mWebView.getSettings();
s.setLoadWithOverviewMode(true);
s.setUseWideViewPort(true);
示例图5.png
由此可见，这个属性的意思应该是，当可视窗口超出了一个屏幕的范围时，缩小加载的HTML文件，已达到宽度和手机屏幕宽度一致的情况。
总结
viewport指设备显示网页的区域，比如某台电脑分辨率为1366 * 768，那么这个电脑的viewport值应该就是1366（屏幕宽度）。
但是手机当初为了适配电脑的网页，viewport值都默认调整得比屏幕的分辨率要大，所以导致显示网页时出现横向滚动条。就比如一款分辨率为720*1280的手机，它的viewport值可能是980(也可能是其他值)，这时加载网页时以980的viewport进行的渲染，那比屏幕的宽度还多了260px，那就超出屏幕，导致出现横向滚动条
当在实际开发中，我们可以设置这个viewport值，然后前端代码可以设置一个适配手机屏幕的viewport值，这个时候就可以到达一个比较满意的效果了。
以下这个设置就可以使得viewport等于device-width（设备宽度）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>例子</title>
</head>
initial-scale=1这个是html页面的缩放比例。
贴上整个HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1000, initial-scale=1">
<title>例子</title>
</head>
<body>
<form>
按钮：<input type="button" value="我是一个按钮2"><br>
账号：<input type="text">
密码： <input type="password">
选中项：<input type="text" value="mike"><br>
性别
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">不详 <br>
爱好
<input type="checkbox" checked="checked">美女
<input type="checkbox">香水
<input type="checkbox">有毒
</form>
</body>
</html>
最后，由于本人水平有限，如有错误，欢迎指出，感激不尽！
网友评论