Planet heat system development

1, a different method of obtaining the viewport, planet heat development system (T: I8O-285I-O282 V LIN)

// Get the visual size of the viewport (including a vertical scroll bar)
the let IW = window.innerWidth,
the IH = window.innerHeight;
the console.log (IW, the IH);

// Get the visual viewport size (the size of the content area, comprising a sidebar, chrome and window resizing the window frame)
the let window.outerWidth = OW,
OH = window.outerHeight;
the console.log (OW, OH);

// Get the screen over the size of the viewport, the fixed value (the size of screen resolution)
the let SW = window.screen.width,
SH = window.screen.height;
the console.log (SW, SH);

// Get the size of a window available to the browser (including padding, but does not include a vertical scroll bar, borders and padding)
the let AW = window.screen.availWidth,
AH = window.screen.availHeight;
the console.log (AW, ah);

// including padding, scroll bars, borders and padding
the let Dow = document.documentElement.offsetWidth,
DOH = document.documentElement.offsetHeight;
the console.log (Dow, DOH);

Minimum width required for all content // viewport without using the scroll bar and the height of
the let DSW = document.documentElement.scrollWidth,
DSH = document.documentElement.scrollHeight;
the console.log (DSW, DSH);

// padding element comprising, but not including the border, the vertical scroll bar margins or
the let document.documentElement.clientWidth = CW,
CH = document.documentElement.clientHeight;
the console.log (CW, CH);

2, JavaScript detect horizontal and vertical screen

// window.orientation: acquiring screen rotation direction
window.addEventListener ( 'a resize', () => {
// the screen in a normal direction or rotated 180 degrees
if (window.orientation === 180 || window.orientation === 0 ) {
the console.log ( 'portrait')
}

// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
if (window.orientation === 90 || window.orientation === -90) {
    console.log('横屏')
}

});

3, CSS detect horizontal and vertical screen

/ CSS detecting horizontal and vertical screen /
@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 tag attribute settings

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

5, meta tag attribute setting screen & fringe bottom black bars

<meta name = "viewport" content = "viewport-fit = cover" />
provided with a safe distance from the border region

/ When a bottom mounting navigation, we want to set them padding value: /
body {
padding-bottom: Constant (Safe-Area-the inset from-bottom);
padding-bottom: the env (Safe-Area-the inset from-bottom);
}
Note: constant function <11.2 commencement, env in iOS> at commencement iOS = 11.2