1. Obtaining methods of different viewports

// Get visual viewport size (including vertical scroll bar)
let iw = window.innerWidth,
	ih = window.innerHeight;
console.log(iw, ih);

// Get the size of the visual viewport (the size of the content area, including the sidebar, the window border, and the border to resize the window)
let ow = window.outerWidth,
	oh = window.outerHeight;
console.log(ow, oh);

// Get the screen viewport size, fixed value (screen resolution size)
let sw = window.screen.width,
	sh = window.screen.height;
console.log(sw, sh);

// Gets the size of the browser's available window (including inner margins, but excluding vertical scrollbars, borders, and margins)
let aw = window.screen.availWidth,
	ah = window.screen.availHeight;
console.log(aw, ah);

// Includes padding, scrollbars, borders, and margins
let dow = document.documentElement.offsetWidth,
	doh = document.documentElement.offsetHeight;
console.log(dow, doh);

// The minimum width and height required to fit all contents of the viewport without using scroll bars
let dsW = document.documentElement.scrollWidth,
	dsH = document.documentElement.scrollHeight;
console.log(dsW, dsH);

// Contains the inner margin of the element, but not borders, margins, or vertical scrollbars
let cw = document.documentElement.clientWidth,
	ch = document.documentElement.clientHeight;
console.log(cw, ch);
Copy the code

2. JavaScript detects vertical and horizontal screens

// window.orientation: Get the orientation of the screen
window.addEventListener('resize'.() = > {
	// Rotate the screen 180 degrees in normal direction
	if (window.orientation === 180 || window.orientation === 0) {
		console.log('portrait')}// The screen rotates 90 degrees clockwise or 90 degrees counterclockwise
	if (window.orientation === 90 || window.orientation === -90) {
		console.log('landscape')}});Copy the code

3, CSS detection horizontal and vertical screen

/* CSS check horizontal/vertical */
@media screen and (orientation:portrait) {

	/ * * / vertical screen
	#app {
		width: 100vw;
		height: 100vh;
		background: red; }}@media screen and (orientation:landscape) {

	Landscape * / / *
	#app {
		width: 50vw;
		height: 100vh;
		background: green; }}Copy the code

4. Set meta tag attributes

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

5, Meta tag properties set bangs & small black bar at the bottom

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

Set the distance between the security zone and the boundary

/* When using the bottom fixed navigation bar, we need to set the padding value for them: */
body {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
Copy the code

Note: The constant function takes effect when iOS < 11.2, and env when iOS >= 11.2