0

我正在开发一个非常基本的响应式网站。虽然它在 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;
}

}

谢谢你的帮助。

4

1 回答 1

0

尝试width在元内容中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
于 2013-05-16T09:08:32.263 回答