>[success] # css 視口viewport 1. 在一個瀏覽器中，我們可以看到的區域就是**視口**（viewport）； 2. **fixed**就是相對于**視口來進行定位**的； 3. 在PC端的頁面中，我們是不需要對視口進行區分，因為我們的布局視口和視覺視口是同一個； 4. 移動端布局窗口和視圖窗口大小并不一致，布局大小按照寬度為980px來布局一個頁面的盒子和內容，然后視圖窗口往往小于布局窗口，因此會對默認對頁面進行縮放以顯示到用戶的可見區域   5. 進行縮放后產生的問題設置100px，那么顯示縮放后的邏輯像素就不在是100px >[danger] ##### 解決移動端問題 1. 這段代碼的意思是讓頁面的布局視口(layout viewport)的寬度等于視覺視口(virsual viewport)的寬度，此時頁面元素會以設備邏輯像素寬度做為文檔寬度進行布局。 2. 如果不加，則頁面元素會以980px的文檔寬度進行布局，然后980px的寬度再縮小填充整個屏幕。會導致頁面元素看起來比較小。 ~~~ 1.聲明<meta name="viewport"> 設置視口的標簽 在head里面并且應該緊接著編碼設置，通過設置 2.viewport 一些參數介紹： 2.1. width 可以設置寬度 (device-width 當前設備的寬度) 2.2. height 可以設置高度 2.3. initial-scale 可以設置默認的縮放比例 2.4. user-scalable 可以設置是否允許用戶自行縮放 2.5. maximum-scale 可以設置最大縮放比例 2.6. minimum-scale 可以設置最小縮放比例 在<meta name="viewport" content="" > content="" 使用以上參數 2.7. width=device-width 寬度一致比例是1.0 2.8 .initial-scale=1.0 寬度一致比例是1.0 2.9. user-scalable=no 不允許用戶自行縮放 （yes，no 1,0） 標準適配方案： <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> meta:vp + tab 快捷方式 ~~~ [# meta 設置viewport到底有何用](https://zhuanlan.zhihu.com/p/337930222)