При повороте iPhone X в горизонтальное положение слева и под изображением обложки появляется пустое пространство - PullRequest
Новая
       27

При повороте iPhone X в горизонтальное положение слева и под изображением обложки появляется пустое пространство

0 голосов
/ 22 мая 2018

Странная проблема произошла сегодня.Во время тестирования простой страницы "скоро" моя фоновая картинка на iPhone X не заполняет весь видовой экран при повороте в альбомную ориентацию.Протестировано в Chrome и Safari.

Упрощенный пример, вызывающий проблему: 

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>

Как вы можете видеть в браузере, он хорошо отрисовывается.На портрете это хорошо.В ландшафте не так уж и много.См. Снимки экрана.

portrait landscape

ОБНОВЛЕНИЕ: невозможно воспроизвести это на iPhone 7. Только iPhone X.

1 Ответ

0 голосов
/ 22 мая 2018

Я нашел решение и хотел опубликовать его на случай, если у кого-то еще возникнет эта проблема.

В iPhone X есть печально известная выемка и домашняя панель.Apple не хочет, чтобы контент охватывался этими элементами, если вы явно не укажете это.Чтобы достичь желаемого результата, вы можете удалить пробелы, просто добавив в объявление стиля следующее:

CSS: 

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

И обновил метатег, добавив viewport-fit = cover 

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

Заполнение предписывает iPhone X добавить необходимые отступы, чтобы фактическое содержимое не закрывалось надрезом и домашней панелью.

Обложка viewport-fit = сообщает браузеру расширитьокно просмотра "под" надрезом и домашним баром.

Надеюсь, это кому-нибудь поможет!

...