Блог

Главная - Вопросы по программированию - Изменения CSS не отражаются на мобильных устройствах

Изменения CSS не отражаются на мобильных устройствах

#css #ios #iphone #mobile

Вопрос:

Я действительно изо всех сил пытаюсь заставить свой css работать на мобильных устройствах. На ноутбуках и ipad все работает нормально, но на Iphone я, похоже, не могу заставить это работать.

Одним из примеров является логотип, который я велел сделать меньше на мобильном телефоне с помощью:

 @media screen and (min-width: 48.0625em)
.table-first {
    width: 100px;
    flex: 0 0 100px;
}
.table-first {
    display: table-cell;
    vertical-align: middle;
    width: 75px;
    flex: 0 0 75px;
    max-width: 100px!important;
    display: block;
}

Я перепробовал все параметры @media min-width, min-ширина устройства, max-ширина и т. Д. Это просто не меняется. То, чего я пытаюсь добиться, — это уменьшить панель поиска и получить значки на экране. Любое изменение CSS просто не отражается на мобильном телефоне.

Следующий код добавляется в заголовок html:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Ответ №1:

Вам нужно обернуть свой код после условия медиа-запроса:

 @media screen and (min-width: 48.0625em) {
    .table-first {
        width: 100px;
        flex: 0 0 100px;
    }
    .table-first {
        display: table-cell;
        vertical-align: middle;
        width: 75px;
        flex: 0 0 75px;
        max-width: 100px!important;
        display: block;
    }
}

Кроме того, лучше заменить ваш min-width: 48.0625em на какое-то значение пикселя

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

1. Это заставляет применять и то и другое, имея первые 100 пикселей, которые должны быть ведущими, и не оказывая никакого влияния на мобильный css.

2. @T. H. в следующий раз вы должны правильно задать вопрос. Вы сказали I have tried all @media options min-width, min-device-width, max-width etc. It simply is not changing — есть решение, почему это не повлияло на ваш макет, вам нужно обернуть свой код условиями медиа-запроса, чтобы он работал. Очевидно, что вы должны задать необходимый медиа-запрос и задать CSS, который следует изменить для этого медиа-запроса.

3. извините, что я совсем новичок в этом, но спасибо за вашу помощь. Это решило мою проблему, изменив порядок css. Спасибо!

Ответ №2:

измените максимальную ширину em на px и перенесите вторую таблицу на первую

**Или используйте этот код:**

 @media screen and (max-width:768px)
    .table-first {
        width: 100px;
        flex: 0 0 100px;
    }
    .table-first {
        display: table-cell;
        vertical-align: middle;
        width: 75px;
        flex: 0 0 75px;
        max-width: 100px!important;
        display: block;
    }
}

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

1. Попробовал код, но максимальная ширина не распознается/не загружается, когда я просматриваю элемент на рабочем столе. Правильно ли это или это просто не показано, потому что это неприменимо?

Метки: