點(diǎn)滴積累恍涂，緩緩?fù)懽?/p>
對于viewport的理解
viewport我們暫且稱它為可視窗口挟憔，一般情況下是指我們的移動(dòng)端利用webview加載網(wǎng)頁的時(shí)候层亿，能夠給這個(gè)網(wǎng)頁提供多大的一個(gè)顯示范圍橡娄。
直接加載一個(gè)HTML頁面
我這里選擇了加載assets文件夾中的一個(gè)html頁面纱烘，websetting先暫時(shí)什么也不用設(shè)置杨拐，直接加載當(dāng)我們用webview加載一個(gè)html頁面時(shí)，
mWebView = (WebView) findViewById(R.id.webview);
mWebView.loadUrl("file:///android_asset/webview_test.html");
那么將這樣顯示：
這似乎是在說明擂啥，默認(rèn)情況下是不支持viewport屬性的哄陶。由于我沒有設(shè)置s.setUseWideViewPort(true);，所以默認(rèn)情況下哺壶，是不會(huì)去加載html文件中的<mate name="viewport"/>這個(gè)節(jié)點(diǎn)的屋吨。html文件中head標(biāo)簽如下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1000, initial-scale=1">
<title>例子</title>
</head>
因?yàn)橹皇菫榱藴y試是否加載meta節(jié)點(diǎn)，所以給width設(shè)置了1000山宾，這樣可以看出變化至扰，因?yàn)楫?dāng)不設(shè)置setUseWideViewPort()方法時(shí)，該webview顯示網(wǎng)頁的范圍就是手機(jī)屏幕资锰，當(dāng)設(shè)置了setUseWideViewPort(true)時(shí)敢课，這個(gè)時(shí)候就會(huì)去加載html中的
<meta name="viewport" content="width=1000, initial-scale=1">
這時(shí)我們可以猜測一下：加載后給可視窗口設(shè)置了1000px的寬度。這時(shí)肯定就會(huì)大于手機(jī)屏幕的寬度绷杜，底部就應(yīng)該會(huì)出現(xiàn)滑動(dòng)條
加載HTML頁面時(shí)設(shè)置viewport屬性
于是乎我們來設(shè)置viewport屬性
mWebView = (WebView) findViewById(R.id.webview);
WebSettings s = mWebView.getSettings();
s.setUseWideViewPort(true);
mWebView.loadUrl("file:///android_asset/webview_test.html");
情況就變成這樣
注意底部可以滑動(dòng)了直秆。這樣就說明了上面的猜測是正確的，因?yàn)榧虞d網(wǎng)頁的可視窗口的寬度為1000px鞭盟，那么就得滑動(dòng)屏幕才能顯示完全圾结。
設(shè)置一個(gè)超屏自動(dòng)縮放的屬性
當(dāng)再多設(shè)置一個(gè)以下屬性時(shí)，顯示如下：
WebSettings s = mWebView.getSettings();
s.setLoadWithOverviewMode(true);
s.setUseWideViewPort(true);
由此可見齿诉，這個(gè)屬性的意思應(yīng)該是筝野，當(dāng)可視窗口超出了一個(gè)屏幕的范圍時(shí)，縮小加載的HTML文件粤剧，已達(dá)到寬度和手機(jī)屏幕寬度一致的情況歇竟。
總結(jié)
viewport指設(shè)備顯示網(wǎng)頁的區(qū)域，比如某臺電腦分辨率為1366 * 768抵恋，那么這個(gè)電腦的viewport值應(yīng)該就是1366（屏幕寬度）焕议。
但是手機(jī)當(dāng)初為了適配電腦的網(wǎng)頁，viewport值都默認(rèn)調(diào)整得比屏幕的分辨率要大馋记，所以導(dǎo)致顯示網(wǎng)頁時(shí)出現(xiàn)橫向滾動(dòng)條号坡。就比如一款分辨率為720*1280的手機(jī)，它的viewport值可能是980(也可能是其他值)梯醒，這時(shí)加載網(wǎng)頁時(shí)以980的viewport進(jìn)行的渲染宽堆，那比屏幕的寬度還多了260px，那就超出屏幕茸习，導(dǎo)致出現(xiàn)橫向滾動(dòng)條
當(dāng)在實(shí)際開發(fā)中畜隶，我們可以設(shè)置這個(gè)viewport值，然后前端代碼可以設(shè)置一個(gè)適配手機(jī)屏幕的viewport值号胚，這個(gè)時(shí)候就可以到達(dá)一個(gè)比較滿意的效果了籽慢。
以下這個(gè)設(shè)置就可以使得viewport等于device-width（設(shè)備寬度）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>例子</title>
</head>
initial-scale=1這個(gè)是html頁面的縮放比例。
貼上整個(gè)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="我是一個(gè)按鈕2"><br>
賬號：<input type="text">
密碼： <input type="password">
選中項(xiàng)：<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>
最后猫胁，由于本人水平有限箱亿，如有錯(cuò)誤，歡迎指出弃秆，感激不盡届惋！
