iPhone不使用媒体查询

时间:2015-04-15 08:48:54

标签: css iphone responsive-design

我遇到了这个问题。我正在使用firefox默认响应式扩展为我的网站创建响应。当我在iPhone上检查它时,它似乎没有使用任何媒体查询。我检查过iPad并且问题没有发生。我检查了相似尺寸的手机(如Galaxy S5),网站工作正常。

我查看了Google,我看到有人建议添加:

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

进入网站的负责人,但这已经存在,但问题仍然存在。

有什么建议吗?

谢谢

1 个答案:

答案 0 :(得分:0)

这是我的CSS

 @media (max-width: 400px) {
        .mws-footer {
        float: right;
        margin-top: -4px;
        margin-right: -9px;
        width: 330px;
    }
    .mws-logo-footer {
        float: none;
        margin: -22px auto 0px;
    }
        .moduletable .twitter-feed-footer {
        width: 290px;
        float: left;
        margin-right: 27px;
    }
        .moduletable.banner-overlay {
        margin-top: -158px;
        position: absolute;
        width: 306px;
        border-bottom: 1px solid #E4E4E4;
        margin-left: -12px;
    }
        .mod-newsflash-adv.mod-newsflash-adv__pack .item {
        margin-bottom: 30px;
        float: left;
        width: 110px !important;
        height: 220px;
    }
        div#pwebcontact153_toggler {
        margin-top: -40px;
        width: 70px;
        display: none;
    }
        #logo a {
        margin: 0px 0px 20px;
        width: 290px;
    }
    .search-block {
        padding: 0px;
        text-align: center;
        margin-right: 20px;
    }
    #number {
        float: left;
        font-size: 28px;
        color: #53296B;
        margin-top: 18px;
        margin-left: 50px;
    }
        .middle-footer {
    float: left;
    margin-top: 2px;
    margin-right: 10px;
    margin-left: 30px;
    max-width: 300px;
    }
    .quick-quote-footer {
    float: left;
    margin-top: 2px;
    margin-left: 17px;
    margin-right: 190px;
    }
    .mws-footer {
    float: right;
    margin-top: -68px;
    margin-right: 21px;
    }
    .about-us .mod-newsflash-adv.mod-newsflash-adv__pack .item {
        margin-bottom: 50px !important;
        width: 270px !important;
        margin-left: 10px !important;
        float: left;
    }
    .services-main-img {
        float: left;
        margin-right: 0px;
        margin-bottom: 25px;
        max-width: 285px;
    }
    .services-h1 {
        font-family: Arial,Helvetica,sans-serif;
        font-weight: normal;
        line-height: normal;
        background: none repeat scroll 0% 0% #53296B;
        padding: 7px 10px;
        text-rendering: optimizelegibility;
        font-size: 23px;
        float: left;
        color: #FFF;
        width: 265px;
        height: 60px;
    }
    .service-side-imgs {
        float: right;
        margin-right: -15px;
        max-width: 310px;
    }
    .service-imgs {
        float: left;
        margin-bottom: 16px;
        width: 101px;
        margin-right: 2px;
    }
    .services-bottom-imgs {
        float: left;
        margin-left: 5px;
        margin-bottom: 25px;
        width: 265px;
    }
    .previous-projects .span3 {
        float: left !important;
        width: 270px !important;
        margin: 0px 0px 0px 8px !important;
    }
    .main-image {
        width: 290px;
        height: 162px;
        margin: 15px 0px 5px -5px;
        float: left;
    }
    .small-img-1 {
        float: left;
        margin-top: 15px;
        margin-left: 5px;
        width: 265px;
    }

    .small-img-2 {
        float: left;
        margin-top: 15px;
        margin-left: 5px;
        width: 265px;
    }
    .summary {
        width: 240px;
        margin: -30px 15px 15px 20px;
        float: left;
        font-size: 11px;
        color: #666;
    }
    div#pwebcontact150_container {
        background-color: transparent;
        width: 275px;
        float: left;
    }
    .moduletable.brochure-sample-slider {
        width: 285px;
        float: left;
        margin: -30px 0px 30px;
    }
    div#pwebcontact158_container {
        background-color: transparent;
        width: 275px;
    }
    }

    @media (max-width: 320px) {
        #logo {
        display: none;  
        }
        .mws-footer {
        float: right;
        margin-top: -4px;
        margin-right: -9px;
        width: 330px;
    }
    .mws-logo-footer {
        float: none;
        margin: -22px auto 0px;
    }
        .moduletable .twitter-feed-footer {
        width: 290px;
        float: left;
        margin-right: 27px;
    }
        .moduletable.banner-overlay {
        margin-top: -158px;
        position: absolute;
        width: 306px;
        border-bottom: 1px solid #E4E4E4;
        margin-left: -12px;
    }
        .mod-newsflash-adv.mod-newsflash-adv__pack .item {
        margin-bottom: 30px;
        float: left;
        width: 110px !important;
        height: 220px;
    }
        div#pwebcontact153_toggler {
        margin-top: -40px;
        width: 70px;
        display: none;
    }
        #logo a {
        margin: 0px 0px 20px;
        width: 290px;
    }
    .search-block {
        padding: 0px;
        text-align: center;
        margin-right: 20px;
    }
    #number {
        float: left;
        font-size: 28px;
        color: #53296B;
        margin-top: 18px;
        margin-left: 50px;
    }
        .middle-footer {
    float: left;
    margin-top: 2px;
    margin-right: 10px;
    margin-left: 30px;
    max-width: 300px;
    }
    .quick-quote-footer {
    float: left;
    margin-top: 2px;
    margin-left: 17px;
    margin-right: 190px;
    }
    .mws-footer {
    float: right;
    margin-top: -68px;
    margin-right: 21px;
    }
    .about-us .mod-newsflash-adv.mod-newsflash-adv__pack .item {
        margin-bottom: 50px !important;
        width: 270px !important;
        margin-left: 10px !important;
        float: left;
    }
    .services-main-img {
        float: left;
        margin-right: 0px;
        margin-bottom: 25px;
        max-width: 285px;
    }
    .services-h1 {
        font-family: Arial,Helvetica,sans-serif;
        font-weight: normal;
        line-height: normal;
        background: none repeat scroll 0% 0% #53296B;
        padding: 7px 10px;
        text-rendering: optimizelegibility;
        font-size: 23px;
        float: left;
        color: #FFF;
        width: 265px;
        height: 60px;
    }
    .service-side-imgs {
        float: right;
        margin-right: -15px;
        max-width: 310px;
    }
    .service-imgs {
        float: left;
        margin-bottom: 16px;
        width: 101px;
        margin-right: 2px;
    }
    .services-bottom-imgs {
        float: left;
        margin-left: 5px;
        margin-bottom: 25px;
        width: 265px;
    }
    .previous-projects .span3 {
        float: left !important;
        width: 270px !important;
        margin: 0px 0px 0px 8px !important;
    }
    .main-image {
        width: 290px;
        height: 162px;
        margin: 15px 0px 5px -5px;
        float: left;
    }
    .small-img-1 {
        float: left;
        margin-top: 15px;
        margin-left: 5px;
        width: 265px;
    }

    .small-img-2 {
        float: left;
        margin-top: 15px;
        margin-left: 5px;
        width: 265px;
    }
    .summary {
        width: 240px;
        margin: -30px 15px 15px 20px;
        float: left;
        font-size: 11px;
        color: #666;
    }
    div#pwebcontact150_container {
        background-color: transparent;
        width: 275px;
        float: left;
    }
    .moduletable.brochure-sample-slider {
        width: 285px;
        float: left;
        margin: -30px 0px 30px;
    }
    div#pwebcontact158_container {
        background-color: transparent;
        width: 275px;
    }
    }