Почему мои медиазапросы CSS3 не работают на мобильных устройствах?

Question

В файле styles.css я использую медиа-запросы, оба из которых используют следующие варианты:

/*--[ Normal CSS styles ]----------------------------------*/

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

    /*--[ Mobile styles go here]---------------------------*/
}

Размеры сайтов меняются в соответствии с желаемым макетом в обычном браузере (Safari, Firefox), когда я уменьшаю окно, однако мобильный макет вообще не отображается на телефоне. Вместо этого я просто вижу CSS по умолчанию.

Кто-нибудь может указать мне правильное направление?

Answer 1

Все три из них были полезными советами, но, похоже, мне нужно было добавить метатег:

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

Теперь, похоже, все работает на Android (2.2) и iPhone ...

Answer 2

Не забудьте иметь стандартные объявления CSS выше медиа-запрос, иначе запрос не будет работать.

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}

Answer 3

Я подозреваю, что здесь может быть ключевое слово only. У меня нет проблем с использованием медиа-запросов, таких как:

@media screen and (max-width: 480px) { }

Answer 4

Я использовал загрузчик на пресс-сайте, но он не работал на IE8, я использовал css3-mediaqueries.js javascript, но все еще не работает.если вы хотите, чтобы ваш медиа-запрос работал с этим файлом javascript, добавьте экран в строку медиа-запроса в css

, вот пример:

<meta name="viewport" content="width=device-width" />


<style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}
</style>

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>

css Строка ссылки такая же простая, как и в строке выше.

Answer 5

Сегодня у меня была похожая ситуация. Медиа-запрос не работает. Через некоторое время я обнаружил, что пробел после «и» пропал. Правильный медиа-запрос должен выглядеть так:

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

Answer 6

Убедитесь, что все ваши комментарии CSS используют эту разметку /* ... */ - , которая является правильной разметкой комментариев для CSS согласно MDN

Я скопировал загрузчик4 медиа-запроса прямо из их документов, и каждый запрос помечен одинаковой разметкой комментария в стиле javascript //!

Кроме того, текстовый редактор IntelliJ позволил мне закомментировать определенные строки CSS в файле LESS, но использовался автоматически//.Это не бесплатная программа, поэтому я предположил, что все правильно.Есть меню настроек для исправления этого поведения.

Кроме того, проверьте свою CSS с помощью надежного онлайн-валидатора. Вот один из W3

Answer 7

@media all and (max-width:320px)and(min-width:0px) {
  #container {
    width: 100%;
  }
  sty {
    height: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

.username {
  margin-bottom: 20px;
  margin-top: 10px;
}

Answer 8

Это также может произойти, если уровень масштабирования браузера не является правильным.Масштаб окна вашего браузера должен быть 100%.В Chrome используйте Ctrl + 0 для сброса уровня увеличения.

Answer 9

Для меня я указал max-height вместо max-width.

Если это ты, иди измени его!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }

Answer 10

Я использую несколько методов в зависимости.В той же таблице стилей я использую: @media (max-width: 450px), или для отдельного убедитесь, что у вас есть ссылка в заголовке правильно.Я посмотрел на ваш fixmeup, и у вас есть запутанный массив ссылок на css.Он действует, как вы говорите, также на HTC desire S.