## 概述 經過分析我們得到,移動頁面最理想的狀態是,避免滾動條且不被默認縮放處理,我們可以通過設置 ``` <meta name="viewport" content=""> //此設置只會在移動端起作用 ``` 來進行控制,并改變瀏覽器默認的layout viewport 的寬度. ## 設置viewport 對viewport設置的meta建議寫在已有的meta標之后. ``` //但是這里一般都設置為device-width <meta name="viewport" content="width=375"> //注意,這里沒有單位,因為這個是獨立像素. ``` ## initial-scale屬性 當我們設置initial-scale=1的時候,發現也達到了width=device-width的作用.當設置為1的時候,相當于設置了layout-viewport等于ideal-viewport .為了兼容性,一般兩個都進行設置. ``` initial-scale = ideal viewport / layout viewport ``` ## maximum-scale 設置最大的縮放比例. ## minimum-scale 設置默認狀態下最小縮放比例. ## user-scaleable 設置是否允許用戶進行縮放. ## 避免滾動 盒子寬度不要設置具體的值,設置成百分比. ## 總結 所以一般在移動端設置viewport 的時候進行如下設置. 快捷鍵 meta:vp ``` <meta name="viewport" content="width=device-width, initial-scale=1"> ```