viewport 概念
viewport就是瀏覽器上用來顯示網(wǎng)頁的區(qū)域。分為三種：
| layout viewport | 整個(gè)網(wǎng)頁所占據(jù)的區(qū)域 |
|---|---|
| visual viewport | 網(wǎng)頁在瀏覽器上的可視區(qū)域 |
| ideal viewport | 完美適應(yīng)移動端的viewport |
- ideal viewport 并沒有一個(gè)固定的尺寸，不同的設(shè)備擁有不同的ideal viewport。即屏幕的寬度。
關(guān)于viewport的延伸
由于默認(rèn)的viewport是layout viewport，而移動設(shè)備的可視區(qū)域比PC要小，所以頁面移動設(shè)備上的字體會很小或出現(xiàn)橫向滾動條。
解決辦法：
在head添加下邊代碼（使viewport的寬度等于ideal viewport的寬度，即防止橫向滾動條出現(xiàn)）：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"
- width=device-width能使所有瀏覽器當(dāng)前的viewport寬度變成ideal viewport的寬度。
- initial-scale=1.0是將頁面的初始縮放值設(shè)為1（1其實(shí)就是沒有縮放）。
- maximum-scale是允許用戶的最大縮放值。
- user-scalable是指是否允許用戶進(jìn)行縮放。
