Задать вопрос
@Httdientee
html

Адаптивность для iphone/ipad?

Не понимаю что я делаю не так, в браузере у меня показывает что все в порядке, верстка работает как надо, но если попробовать это все на iphone или ipad то все куда-то уезжает, как буд-то я ничего и не делал для того чтобы все было ровно
Может я не верные расширения экрана установил? Без понятия
Визуально как выглядит:
spoiler
60ddc883418c3673031109.png60ddc8a7999a3651670225.png

код html:
spoiler
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Верстка моб. приложения</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <img src="img/phones.png" alt="">
        <h1>iPhone app based<br>
            on real film profiles</h1>

        <p>With its streamlied workflow and state of the art filters born<br>
            from real film, RNI Films is designed todo what only film<br>
            can do, just in a few taps</p>

        <button id="download"><span>Download the app</span></button>
    </div>
</body>
</html>


Код CSS:
spoiler
* {
    margin: 0;
    padding: 0;
}
.container img {
    position: absolute;
    right: 5%;
    bottom: 0;
}
.container h1 {
    font-size: 51px;
    font-family: helvetica;
    position: absolute;
    top: 28%;
    left: 10%;
}
.container p {
    font-size: 19px;
    position: absolute;
    top: 48%;
    left: 10%;
    color: rgba(0, 0, 0, 0.678);
    
}
.container button#download {
    width: 200px;
    height: 50px;
    background: none;
    border: 2px solid black;
    border-radius: 25px 25px 25px 25px;
    position: absolute;
    top: 63%;
    left: 10%;
    font-weight: bold;
    cursor: pointer;
}
@media screen and (max-width: 1200px) {
    .container img {
        position: absolute;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0%);
        top: 350px;
    }
    .container p {
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0%);
        top: 25%;
    }
    .container button#download {
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0%);
        top: 40%;
    }
    .container h1 {
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0%);
        top: 5%;
    }
}
@media screen and (max-width: 573px) {
    .container img {
        width: 90%;
        height: auto;
    }
}
@media screen and (max-width: 484px) {
    .container p {
        top: 18%;
    }
    .container img {
        top: 330px;
    }
    .container button#download {
        top: 35%;
    }
}
@media screen and (width: 768px) {
    .container p {
        top: 20%;
    }
    .container button#download {
        top: 30%;
    }
}
@media screen and (width: 1024px) {
    .container p {
        top: 17%;
    }
    .container button#download {
        top: 25%;
    }
}
@media screen and (width: 1024px) and (height: 768px) {
    .container p {
        top: 24%;
    }
    .container button#download {
        top: 40%;
    }
}
@media screen and (width: 375px) and (height: 667px) {
    .container h1 {
        left: 60%;
    }
    .container p {
        top: 24%;
    }
    .container button#download {
        top: 70%;
    }
}
@media screen and (width: 375px) and (height: 812px) {
    .container p {
        top: 40%;
    }
    .container button#download {
        top: 60%;
    }
}
@media screen and (max-width: 417px) {
    .container p {
        text-align: center;
        font-size: 16px;
        margin-left: 1px;
        margin-right: -124px;
    }
    .container h1 {
        text-align: center;
        font-size: 31px;
    }

}
@media screen and (max-width: 285px) {
    .container p {
        top: 25%;
    }
    .container img {
        top: 380px;
    }
    .container button#download {
        top: 42%;
    }
}
@media screen and (min-width: 812px) {
    .container p {
        top: 40%;
    }
    .container button#download {
        top: 70%;
    }
}
@media screen and (min-width: 736px)  {
    .container p {
        top: 40%;
    }
    .container button#download {
        top: 70%;
    }
}
@media screen and (min-width: 667px) {
    .container p {
        top: 40%;
    }
    .container button#download {
        top: 70%;
    }
}
@media screen and (min-width: 568px) {
    .container p {
        top: 43%;
    }
    .container button#download {
        top: 70%;
    }
}
@media screen and (min-width: 765px) and (min-height: 1023px) {
    .container p {
        top: 20%;
    }
    .container button#download {
        top: 33%;
    }
}

@media screen and (device-width: 1024px) and (device-height: 1366px) {
    .container p {
        top: 17%;
    }
    .container button#download {
        top: 25%;
    }
}
@media screen and (device-width: 1024px) and (device-height: 768px) {
    .container p {
        top: 23%;
    }
    .container button#download {
        top: 38%;
    }
}
@media screen and (device-width: 1366px) and (device-height: 1024px) {
    .container p {
        top: 41%;
    }
    .container button#download {
        top: 50%;
    }
}
  • Вопрос задан
  • 98 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 1
alinax
@alinax
Httdientee картинка сделана абсолютом, вот и текст с кнопкой на неё наезжают....а зачем меди-запросов больше чем самого css ?
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить платежную систему Юкассы в телеграм боте
28 нояб. 2024, в 19:36
1000 руб./за проект
Разработка приложения VPN
28 нояб. 2024, в 18:46
3000 руб./за проект
Разработка Телеграм Бота
28 нояб. 2024, в 17:46
10000 руб./за проект
Ещё заказы