// 獲取視覺視口大?。òù怪睗L動條）
let iw = window.innerWidth,
 ih = window.innerHeight;
console.log(iw, ih);

// 獲取視覺視口大?。▋?nèi)容區(qū)域大小，包括側(cè)邊欄、窗口鑲邊和調(diào)整窗口大小的邊框）
let ow = window.outerWidth,
 oh = window.outerHeight;
console.log(ow, oh);

// 獲取屏幕理想視口大小，固定值（屏幕分辨率大?。?
let sw = window.screen.width,
 sh = window.screen.height;
console.log(sw, sh);

// 獲取瀏覽器可用窗口的大小（包括內(nèi)邊距、但不包括垂直滾動條、邊框和外邊距）
let aw = window.screen.availWidth,
 ah = window.screen.availHeight;
console.log(aw, ah);

// 包括內(nèi)邊距、滾動條、邊框和外邊距
let dow = document.documentElement.offsetWidth,
 doh = document.documentElement.offsetHeight;
console.log(dow, doh);

// 在不使用滾動條的情況下適合視口中的所有內(nèi)容所需的最小寬度和高度
let dsW = document.documentElement.scrollWidth,
 dsH = document.documentElement.scrollHeight;
console.log(dsW, dsH);

// 包含元素的內(nèi)邊距，但不包括邊框、外邊距或者垂直滾動條
let cw = document.documentElement.clientWidth,
 ch = document.documentElement.clientHeight;
console.log(cw, ch);

// window.orientation：獲取屏幕旋轉(zhuǎn)方向
window.addEventListener('resize', () => {
 // 正常方向或屏幕旋轉(zhuǎn)180度
 if (window.orientation === 180 || window.orientation === 0) {
  console.log('豎屏')
 }

 // 屏幕順時鐘旋轉(zhuǎn)90度或屏幕逆時針旋轉(zhuǎn)90度
 if (window.orientation === 90 || window.orientation === -90) {
  console.log('橫屏')
 }
});

/* css檢測橫豎屏 */
@media screen and (orientation:portrait) {

 /* 豎屏 */
 #app {
  width: 100vw;
  height: 100vh;
  background: red;
 }
}

@media screen and (orientation:landscape) {

 /* 橫屏 */
 #app {
  width: 50vw;
  height: 100vh;
  background: green;
 }
}

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<meta name="viewport" content="viewport-fit=cover" />

/* 當使用底部固定導(dǎo)航欄時，我們要為他們設(shè)置 padding值： */
body {
 padding-bottom: constant(safe-area-inset-bottom);
 padding-bottom: env(safe-area-inset-bottom);
}