Webview中viewport的一些理解

点滴积累，缓缓蜕变

示意图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文件中的这个节点的。html文件中head标签如下：

因为只是为了测试是否加载meta节点，所以给width设置了1000，这样可以看出变化，因为当不设置setUseWideViewPort()方法时，该webview显示网页的范围就是手机屏幕，当设置了setUseWideViewPort(true)时，这个时候就会去加载html中的

这时我们可以猜测一下：加载后给可视窗口设置了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（设备宽度）

initial-scale=1这个是html页面的缩放比例。

贴上整个HTML代码:

    
    
    




    按钮：

    账号：
    密码： 
    选中项：


    性别
    男
    女
    不详 


    爱好
    美女
    香水
    有毒

最后，由于本人水平有限，如有错误，欢迎指出，感激不尽！