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

в стилях.css, я использую медиа-запросы, оба из которых используют вариацию:

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

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

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

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

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

9 129
html css css3 media-queries mobile-website

9 ответов:

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

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

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

344

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

.edcar_letter{
    font-size:180px;
}

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

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

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

20

я использовал bootstrap на пресс-сайте, но он не работал на 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 Link line так же просто, как и выше.

14

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

@media screen and (max-width: 1024px) {}
9
@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;
}
1

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

0

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

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

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

кроме того, проверьте свой css с надежным онлайн-валидатором. вот один по W3

0

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

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

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