Блог

Главная - Вопросы по программированию - Адаптивный веб-дизайн работает на рабочем столе, но не на мобильном устройстве

Адаптивный веб-дизайн работает на рабочем столе, но не на мобильном устройстве

#html #css #responsive-design

#HTML #css #адаптивный дизайн

Вопрос:

Адаптивный дизайн работает в эмуляторе inspect elements, но на мобильном устройстве он не показывает желаемый результат.

HTML:

 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Esmaeeil enani</title>
    <link rel="stylesheet" type="text/css" media="screen" href="CVStyle.css" />
    <!--Online Font Awesome Call-->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512- 4zCK9k qNFUR5X cKL9EIR ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>
</head>

CSS:

 @media only screen and (max-width: 1290px) {
    .skills .skill-item {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 1024px) {

}

В коде больше, но это упрощенная версия.

вот как это выглядит на рабочем столе (режим проверки) Рис. 1 Рис. 2

вот как это выглядит на мобильном устройстве (iPhone) на iPhone рис. 1 на iPhone рис. 2

Это выглядит плохо только на устройствах iPhone

Комментарии:

1. Пожалуйста, покажите результат, который вы также получаете

2. Попробуйте обновить свой вопрос с дополнительной информацией.

3. Согласно вашим изображениям, с предоставленным вами кодом проблем нет. Вам нужно будет выяснить, что вызывает столкновение элементов. Вероятно, слишком много display: fixed или что-то подобное в CSS. Публикация всего вашего кода на SO приведет только к большему количеству отрицательных голосов.

Ответ №1:

Проблема связана с .grid правилом css.

Вам нужно изменить height:100% на min-height:100%

Комментарии:

1. @Esmaeeilenani не просто добавляйте min-height: 100%; правила с помощью мультимедиа, вам нужно отменить height . Поэтому установите его height:auto; в том же правиле.