我遇到了这个问题。我正在使用firefox默认响应式扩展为我的网站创建响应。当我在iPhone上检查它时,它似乎没有使用任何媒体查询。我检查过iPad并且问题没有发生。我检查了相似尺寸的手机(如Galaxy S5),网站工作正常。
我查看了Google,我看到有人建议添加:
<meta name="viewport" content="width=device-width, initial-scale=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;
}
}