@media работает при изменении размера окна браузера, но не на мобильном телефоне

РЕШЕНО: Том: Ты был так прав. К сожалению, функция WordPress wp_head() добавила ширину =1100 из-за плагина. Спасибо!

Я работаю над новым адаптивным сайтом, но не могу заставить работать запрос @media. Он работает при изменении размера окна браузера на моем рабочем столе, но не работает на моем ipad, iphone или android телефоне.

Что я делаю неправильно?!

Вот ссылка: http://demo.mindspins.com/atmnieuw/ Вот ссылка на CSS: http://demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php

Заранее спасибо!

По запросу код CSS:

@media all and (max-width: 1460px) {
    .site-width{ width: 1199px; }
    .main-width{ width: 719px; }
}
@media all and (max-width: 1220px) {
    .site-width{ width: 959px; }
    .main-width{ width: 479px; }
    #page-title h1.thetitle{
        font-size: 20px;
        line-height: 24px;
    }
    .sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{
        font-size: 20px;
        line-height: 24px;
    }
}
@media all and (max-width: 980px) {
    .site-width{ width: 719px; }
    .main-width{ width: 479px; }
    .right-width{ display: none; }
    #header-right{ display: none; }
    .widgets-wrapper-1{ display: block; }
    .widgets-wrapper-3{ display: block; position: relative; padding: 20px 0 0 20px; }
}
@media all and (max-width: 740px) {
    .site-width{ width: 95%; margin: 0 auto;}
    #header-wrapper{ width: 100%; }
    #header-left{ display: none; }
    #header-mid{ height: 80px; }
    #atmlogo a.atm {
        z-index: 100;
        top: 24px;
        left: 0;
    }
    .main-width{ width: 100%; }
    .left-width{ width: 100%; }
    .sidebar-left{ display: none; }
    .site-bg{ display: none; }
    #header-left span.header-contact{ height: 80px; width: 100%;}
    #main-nav{ height:auto !important; }
    #mobile-nav{
        margin: -4px 0 1px 0;
        display: block;
        position: relative;
        width: 100%;
    }
    #mobile-nav .nav-wrapper{
        display: block;
        color:  #fff;
        background: #cc0033;
        margin: 1px 0;
        height: 40px;
        padding: 0 10px;
    }
    #mobile-nav .nav-wrapper select.atm-dropdown{
        font-size: 12px;
        display: block;
        height: 40px;
        width: 100%;
        color:  #fff;
        background: #cc0033;
        border: 0;
        clear: both;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
    }
    #mobile-nav .theme-s{
        width: 100%;
        background: #cc0033;
        color:  #fff;
    }

    #mobile-nav input.s{
        background: #cc0033;
        color:  #fff;
    }

    #mobile-nav input.searchsubmit{
        border-left: solid 1px #dcdcdc;
        color:  #fff;
        background: #cc0033;
        background-image: url(../images/icon_search.png);
        background-repeat: no-repeat;
        background-position: right top;
        -webkit-border-radius: 0;
        -webkit-appearance: none;
    }

    #primary{ display: none; }
    #main-content-header{
        height:auto !important;
        margin: 0 0 1px 0;
    }
    #main-content-header span.header-image{
        display: block;
        float: left;
        width: 25%;
        height:auto !important;
        margin: 0;
    }
    #main-content-header span.header-image img{
        line-height: 0px;
        margin: 0;
        padding: 0;
    }

    #page-title{
        height: 79px;
    }
}
@media all and (max-width: 500px) {
    body {
        font-size: 12px;
        line-height: 20px;
    }
        #footer-nav{ display: none; }
        #copyrights{ display: none; }
        .entry-content-bg{ padding: 20px; }
        #page-title .title-wrapper{ padding: 0 20px }
        #page-title h1.thetitle{
        font-size: 16px;
        line-height: 20px;
    }
}
Источник

3 ответа

Решение

Еще раз посмотрев, при использовании моего iPhone 4S и Remote Web Inspector, представленного в iOS 6, я не смог найти никаких стилей для чего-либо ниже. max-width: 1200pxдаже если они находятся в файле CSS. Я не знаю, почему это так.

Кроме того, я написал сообщение в блоге об адаптивном дизайне и медиа-запросах за несколько месяцев, вы можете прочитать его здесь, если хотите. Не говоря о том, что вы плохо разбираетесь в медиа-запросах (это очень хороший сайт!), Просто надеюсь, что он будет для вас интересным:)

РЕДАКТИРОВАТЬ: просто глядя на ваш сайт снова, я заметил в head (справа внизу) у вас есть этот код:

meta name="viewport" content="width=1100"

Это может быть причиной того, что стили не применялись ни при чем ниже ширины экрана 1100px или 1200px. Выньте это и попробуйте снова.

Источник

Вы можете использовать этот код в теге head:

<meta name="viewport" content="width=device-width, initial-scale=1"/>
Источник

Это может иметь какое-то отношение к наличию вашего CSS в отдельных файлах. Как правило, вы всегда должны писать все свои CSS в одном файле (style.css). Это не должно делать, но просто для ясности поместите их обоих в один файл и посмотрите, что произойдет. Если это не сработает, прокомментируйте это, и я еще раз посмотрю.

Источник
Другие вопросы по тегам