目錄

• 1、不同視口的獲取方法
  
• 2、檢測橫豎屏
  
• 3、檢測橫豎屏
  
• 4、meta標籤屬性設定
  
• 5、meta標籤屬性設定設定劉海屏&底部小黑條
  

1、不同視口的獲取方法

// 獲取視覺視口大小（包括垂直滾動條）
let iw = window.innerWidth,ih = window.innerHeight;
console.log(iw,ih);

// 獲取視覺視口大小（內容區域大小，包括側邊欄、視窗鑲邊和調整視窗大小的邊框）
let ow = window.outerWidth,oh = window.outerHeight;
console.log(ow,oh);

// 獲取螢幕理想視口大小，固定值（螢幕解析度大小）
let sw = window.screen.width,sh = window.screen.height;
console.log(sw,sh);

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

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

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

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

2、Script檢測橫豎屏

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

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

3、CSS檢測橫豎屏

/* 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;
 }
}

4、meta標籤屬性設定

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

5、meta標籤屬性設定設定劉海屏&底部小黑條

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

設定安全區域與邊界的距離

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

注：constant 函式在iOS < 11.2時生效，env 在iOS >= 11.2時生效

到此這篇關於判斷移動端橫豎屏視口檢測實現的幾種方法的文章就介紹到這了,更多相關js 移動端橫豎屏視口檢測內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希www.cppcns.com望大家以後多多支援我們！