我正在开发一个非常基本的响应式网站。 虽然它在 Responsinator 和 Firefox for Android 上完美运行，但当我在 Nexus 4 上运行该网站时，Chrome 似乎没有考虑到一些媒体查询和 CSS 属性。
我在 中的每个页面上都使用了一个视口(viewport)，这可能是问题所在吗？
<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;
}
感谢您的帮助。
最佳答案
尝试在元内容中添加宽度:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
关于android - Chrome for Android 中的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16582890/