我正在开发一个非常基本的响应式网站。虽然它在 Responsinator 和 Firefox for Android 上运行良好，但当我在 Nexus 4 上运行网站时，Chrome 似乎没有考虑到一些媒体查询和 CSS 属性。
我正在使用放置在每个页面上的视口，这可能是问题吗？
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这是导致问题的屏幕大小的媒体查询：
@media (max-width: 490px) {
#welcome {
background-size: 16em 11em;
}
h1 a {
width: 70.6%;
font-size: 1.4em;
/*padding-top: 16px;*/
padding-top: 0.7em;
}
h2.pageTitle {
font-size: 2.5em;
margin: 25% auto 10px auto;
}
p.pageDescription {
font-size: 1.2em;
width: 85%;
}
p.pageDescription:last-child {
font-size: 1.2em;
width: 85%;
margin: 0 auto 26% auto;
}
.workThumbnail {
height: 140px;
}
p.workThumbnailDescription {
font-size: 1em;
}
footer {height: 100%;}
p.currentStatus {font-size: 1.6em;}
p.copyright {font-size: 0.8em;}
/* Movie Poster Page */
#OMthePostersEditorial {
width: 85%;
}
/* CAG Page */
#CAGourGoal {float: none;}
#CAGourGoalEditorial {
width: 85%;
}
h2.caseStudyTitle {}
p.caseStudyDescription {
font-size: 1.1em;
}
strong.titleItalic {
font-size: 1em;
}
/* Contact Page */
section.formContainer {
height: 100%;
padding: 10% 0 10% 0;
}
#contactForm {
display: none;
}
#contactMobile {
display: block;
margin: 0 auto;
width: 230px;
}
#contactMobile a {
text-decoration: none;
font-size: 1.5em;
font-family: 'HelveticaNeueLight';
color: #252626;
}
}
谢谢你的帮助。