У меня проблема, когда альбомная версия Chrome добавляет пробел слева и справа от моего экрана.
Здесь Вот спецификации:
У меня есть подход "кухонная раковина", где я попробовал все, чтобы удалить эти белые полосы и сделать фон полноэкранным.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
И следующие CSS:
html{
margin: env(safe-area-inset);
padding: env(safe-area-inset);
}
html, body, img{
width: 100%;
height: 100%;
margin: 0;
box-sizing: border-box;
padding: 0;
width: 120vw;
}
img{
margin: env(safe-area-inset);
object-fit: cover;
}
Вот живая демонстрация, с которой можно поиграть:
https://codepen.io/EightArmsHQ/pen/JjYygPg
Я получаю хорошие результаты в iOS Safari , но, похоже, на этом все и заканчивается. Подобные проблемы были подняты env (safe-area-inset-top) не работает на Android P ie + WebView 69
Мне интересно, если это Chrome iOS ошибка, или если моя реализация неверна. Стоит отметить, что Safari удаляет , удаляя пробелы при добавлении этих свойств.