Так что я относительно новичок в этом.Но я заметил, что в Safari и Chrome Mobile моя страница выглядит по-разному.
(эти красные линии - просто линии на картинке)
Кажется, Safari масштабирует мою картинку больше, чем Chrome, и из-зачто весь контент перемещен.
Итак, как мне кодировать эту ситуацию, чтобы она выглядела более похожей в обоих браузерах?Дело в том, что я хочу сделать слайд-шоу, поэтому мне нужно, чтобы к изображениям были привязаны заметки.
Мой MWE:
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1">
</head>
<style type="text/css">
body {
margin: 0;
overflow-x: visible;
color: #fff;
font-size: 76px;
}
.wrapper {
height: 100%;
display: flex;
}
.container {
height: 100vh;
}
.slide {
width: 100%;
padding: 120px 0;
background-position: center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: flex-end;
}
</style>
<body>
<div class="container">
<div class="wrapper">
<div class="slide" style="background-image:url(./images/bg01.jpg)" >
Love
</div>
</div>
</div>
</body>
</html>