When rotating an iPhone X to landscape, white space appears to the left and below cover image

问题

A weird problem occurred today. While testing a simple "coming soon" page my background image on my iPhone X is not filling the entire viewport when rotating to landscape. Tested in Chrome and Safari.

A simplified example that produces the problem:

html {
  background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

<!DOCTYPE HTML>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	</head>

	<body>
		
	</body>

</html>

As you can see in the browser it renders fine. In portrait, it renders fine. In landscape not so much. See screenshots.

UPDATE: Cannot reproduce this on an iPhone 7. Just the iPhone X.

回答1:

I found the solution and wanted to post it in case anyone else has this problem.

The iPhone X has the notorious notch and home bar. Apple doesn't want content to be covered by those items unless you explicitly tell it to. To achieve the desired result you can remove the whitespace by simply adding the following to your style declaration.

CSS:

html {
  // your css to create a cover image 
  padding: env(safe-area-inset); // <- this is the missing piece. Add it.
}

And updated the meta tag to include viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

The padding tells iPhone X to add the necessary padding so the actual content is not covered by the notch and home bar.

The viewport-fit=cover tells the browser to extend the viewport "under" the notch and home bar.

I hope this helps someone!

来源：https://stackoverflow.com/questions/50475114/when-rotating-an-iphone-x-to-landscape-white-space-appears-to-the-left-and-belo

标签

html5

responsive-design

responsive

cover