我遇到此问题。我正在使用Firefox的默认响应扩展来为我的网站创建响应式。当我开始在iPhone上检查它时，它似乎没有使用任何媒体查询。我已经检查过iPad并且问题不会发生。我已经检查过类似尺寸的手机（如Galaxy S5），而且网站工作正常。iPhone未使用媒体查询
我已经看过在谷歌，我看到人们建议增加：
<meta name="viewport" content="width=device-width, initial-scale=1">
到该网站的负责人，但这个已经存在，但仍然问题依然。
有什么建议吗？
感谢
这是我的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;
}
}
请提供一个例子媒体查询不工作，任何其他代码，这有助于理解您的问题。 – Ronny
嗨Kieren，我们可能需要看到更多的代码来确定问题吗？你可以创建一个最小的例子，说明你不在测试什么样的iPhone模型？ – TZHX
该网站是：johnwright.multi-web-service.co.uk 使用的媒体查询是：@media（max-width：320px）{ 但是媒体中的任何内容都无法在iPhone 5上工作.. –