文章目錄
- 視口
- 布局視口
- 視覺視口
- 理想視口
- 視口適配 Meta viewport
- 獲取視窗大小API
- 媒體查詢 @media
- 媒體型別
- 媒體功能
視口
viewport 解釋為中文就是‘視口’的意思，也就是瀏覽器中用于顯示網頁的區域，在 PC 端，其大小也就是瀏覽器可視區域的大小，所以我們也不會太關注此概念；而在移動端，絕大多數情況下 viewport 都大于瀏覽器可視區，保證 PC 頁面在移動瀏覽器上面的可視性，為提升可視性體驗，針對移動端有了對 viewport 的深入研究，
在移動端有三種型別的viewport：layoutviewport、visualviewport、idealviewport，具體解釋如下
布局視口
layoutviewport 布局視口: 大于實際螢屏， 元素的寬度繼承于 layoutviewport，用于保證網站的外觀特性與桌面瀏覽器一樣，layoutviewport 到底多寬，每個瀏覽器不同，iPhone 的 safari 為 980px，通過 document.documentElement.clientWidth 獲取，
布局視口是指網頁的寬度，一般移動端瀏覽器都默認設定了布局視口的寬度，
我們可以通過呼叫document.documentElement.clientWidth / clientHeight來獲取布局視口大小，
視覺視口
visualviewport 視覺視口: 當前顯示在螢屏上的頁面，即瀏覽器可視區域的寬度，
視覺視口是指用戶正在看到的網站的區域，這個區域的寬度等同于移動設備的瀏覽器視窗的寬度
當用戶對瀏覽器進行縮放時，不會改變布局視口的大小，所以頁面布局是不變的，但是縮放會改變視覺視口的大小，
例：用戶將瀏覽器視窗放大了200%，這時瀏覽器視窗中的CSS像素會隨著視覺視口的放大而放大，這時一個CSS像素會跨越更多的物理像素，
所以，布局視口會限制你的CSS布局而視覺視口決定用戶具體能看到什么，
我們可以通過呼叫window.innerWidth / innerHeight來獲取視覺視口大小，
理想視口
idealviewport 理想視口: 為瀏覽器定義的可完美適配移動端的理想 viewport，固定不變，可以認為是設備視口寬度，比如 iphone 7 為 375px, iphone 7p 為 414px，
布局視口在移動端展示的效果并不是一個理想的效果，所以理想視口(ideal viewport)就誕生了：網站頁面在移動端展示的理想大小，
上面在介紹CSS像素時曾經提到頁面的縮放系數 = CSS像素 / 設備獨立像素，實際上說頁面的縮放系數 = 理想視口寬度 / 視覺視口寬度更為準確，
所以，當頁面縮放比例為100%時，CSS像素 = 設備獨立像素，理想視口 = 視覺視口，
我們可以通過呼叫screen.width / height來獲取理想視口大小，
為了實作理想視口，需要給移動端頁面添加標簽配置視口，通知瀏覽器來進行處理，
視口適配 Meta viewport
<meta>元素表示那些不能由其它HTML元相關元素之一表示的任何元資料資訊，它可以告訴瀏覽器如何決議頁面，
我們可以使用<meta>元素的viewport來幫助我們設定視口、縮放等，從而讓移動端得到更好的展示效果，
viewport的適配
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
viewport屬性決議
| Value | 可能值 | 描述 |
|---|---|---|
| width | 正整數或device-width | 以pixels（像素）為單位， 定義布局視口的寬度， |
| height | 正整數或device-height | 以pixels（像素）為單位， 定義布局視口的高度， |
| initial-scale | 0.0-10.0 | 定義頁面初始縮放比率， |
| minimum-scale | 0.0-10.0 | 定義縮放的最小值；必須小于或等于maximum-scale的值， |
| maximum-scale | 0.0-10.0 | 定義縮放的最大值；必須大于或等于minimum-scale的值， |
| user-scalable | 一個布林值（yes或者no） | 如果設定為 no，用戶將不能放大或縮小網頁，默認值為 yes， |
注意
device-width就等于理想視口的寬度，所以設定width=device-width就相當于讓布局視口等于理想視口，
由于initial-scale = 理想視口寬度 / 視覺視口寬度，所以我們設定initial-scale=1;就相當于讓視覺視口等于理想視口，
這時，1個CSS像素就等于1個設備獨立像素，而且我們也是基于理想視口來進行布局的，所以呈現出來的頁面布局在各種設備上都能大致相似，
獲取視窗大小API
| API | 作用 |
|---|---|
| window.innerHeight | 獲取瀏覽器視覺視口高度（包括垂直滾動條） |
| window.outerHeight | 獲取瀏覽器視窗外部的高度，表示整個瀏覽器視窗的高度，包括側邊欄、視窗鑲邊和調正視窗大小的邊框 |
| window.screen.Height | 獲取獲螢屏取理想視口高度，這個數值是固定的，`設備的解析度/設備像素比 |
| window.screen.availHeight | 瀏覽器視窗可用的高度 |
| document.documentElement.clientHeight | 獲取瀏覽器布局視口高度，包括內邊距，但不包括垂直滾動條、邊框和外邊距 |
| document.documentElement.offsetHeight | 包括內邊距、滾動條、邊框和外邊距 |
| document.documentElement.scrollHeight | 在不使用滾動條的情況下適合視口中的所有內容所需的最小寬度，測量方式與clientHeight相同：它包含元素的內邊距，但不包括邊框，外邊距或垂直滾動條 |
媒體查詢 @media
使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式，
@media mediatype and|not|only (media feature) {
CSS-Code;
}
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
媒體型別
| 值 | 描述 |
|---|---|
| all | 用于所有設備 |
| 用于列印機和列印預覽 | |
| screen | 用于電腦螢屏 |
| speech | 應用于螢屏閱讀器等發聲設備 |
可以給不同的媒體設定不同的值
媒體功能
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數，如果不是彩色設備，則值等于0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數，如果沒有使用彩色查詢表，則值等于0 |
| device-aspect-ratio | 定義輸出設備的螢屏可見寬度與高度的比率 |
| device-height | 定義輸出設備的螢屏可見高度 |
| device-width | 定義輸出設備的螢屏可見寬度 |
| grid | 用來查詢輸出設備是否使用柵格或點陣 |
| height | 定義輸出設備中的頁面可見區域高度 |
| max-aspect-ratio | 定義輸出設備的螢屏可見寬度與高度的最大比率 |
| max-color | 定義輸出設備每一組彩色原件的最大個數 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數 |
| max-device-aspect-ratio | 定義輸出設備的螢屏可見寬度與高度的最大比率 |
| max-device-height | 定義輸出設備的螢屏可見的最大高度 |
| max-device-width | 定義輸出設備的螢屏最大可見寬度 |
| max-height | 定義輸出設備中的頁面最大可見區域高度 |
| max-monochrome | 定義在一個單色框架緩沖區中每像素包含的最大單色原件個數 |
| max-resolution | 定義設備的最大解析度 |
| max-width | 定義輸出設備中的頁面最大可見區域寬度 |
| min-aspect-ratio | 定義輸出設備中的頁面可見區域寬度與高度的最小比率 |
| min-color | 定義輸出設備每一組彩色原件的最小個數 |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數 |
| min-device-aspect-ratio | 定義輸出設備的螢屏可見寬度與高度的最小比率 |
| min-device-width | 定義輸出設備的螢屏最小可見寬度 |
| min-device-height | 定義輸出設備的螢屏的最小可見高度 |
| min-height | 定義輸出設備中的頁面最小可見區域高度 |
| min-monochrome | 定義在一個單色框架緩沖區中每像素包含的最小單色原件個數 |
| min-resolution | 定義設備的最小解析度 |
| min-width | 定義輸出設備中的頁面最小可見區域寬度 |
| monochrome | 定義在一個單色框架緩沖區中每像素包含的單色原件個數，如果不是單色設備，則值等于0 |
| orientation | 定義輸出設備中的頁面可見區域高度是否大于或等于寬度 |
| resolution | 定義設備的解析度，如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設備的掃描工序 |
| width | 定義輸出設備中的頁面可見區域寬度 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/377105.html
標籤：其他
下一篇：前端之JSON詳解