viewport 視口

width: 視口寬度 device-width: 設備屏幕寬度

pc端

pc端只有一個視口，也就是瀏覽器主窗口的區域

手機端

移動端有三種視口：布局視口： layout viewport 可視視口： visual viewport 理想視口： ideal viewport

• 可視視口

可視視口一般式不固定的，用戶的縮放、拖動會修改。

• 布局視口

布局視口在每一款設備上是不變的。

因為移動端的屏幕尺寸都比較小，我們的頁面根本放不下，這就有了布局視口的概念了，布局視口是虛擬的，一般都比較大，用戶可以通過移動頁面，縮放來通過可視視口查看頁面的全部內容。

但是只是有這兩個視口還是不行的，用戶體驗不是很好，這就有了我們的理想視口。

• 理想視口

理想視口就是布局視口在一個設備上的最佳尺寸，理想視口下的頁面便于閱讀。

怎么使用理想視口呢？

<meta name="viewport" content="width=device-width" />// 這句話告訴，我要使用理想視口。也就是讓布局視口的寬度等于可視視口的寬度

• 不指定該屬性

布局視口的寬度為廠商默認的寬度

• 指定屬性

布局視口將稱為理想視口，也就是等于可視視口。 通常我們會直接指定用戶的縮放比例為1 <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的响应式设计之 —— 视口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。