Внизу две картинки, первая отображает работу эмулятора в FireFox, вторая в Google Chrome.
Как видно, работа одного и того же кода отличается.
iPhone у меня нет, по этому я был бы очень благодарен, если бы счастливый обладатель яблочного телефона смог открыть в нем код ниже и сказал бы, как отображается у него на настоящем устройстве.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>i-test</title>
<style>
body {
background: green;
}
* {
margin: 0;
padding: 0;
}
.main-container {
width: 100vw;
height: 100vh;
max-width: 100%;
margin-left: auto;
margin-right: auto; }
.main-container:after {
content: " ";
display: block;
clear: both; }
@media (min-width: 320px) {
.cover-container {
width: 100%;
height: 100%;
background-image: url(image.png);
background-size: contain;
background-repeat: no-repeat;
background-position: top; } }
@media (min-width: 568px) {
.cover-container {
width: 100%;
height: 100%;
background-image: url(image.png);
background-size: contain;
background-repeat: no-repeat;
background-position: left; } }
</style>
</head>
<body>
<div class="main-container">
<div class="cover-container"></div>
</div>
</body>
</html>
Картинка прилагается ниже. У нее есть желтая однапиксельная рамка, которая предназначена для обозначения границ.
Простой
Простой