Chrome for Android 中的 CSS 问题答案

【问题标题】：CSS issue in Chrome for AndroidChrome for Android 中的 CSS 问题
【发布时间】：2013-05-16 08:48:01
【问题描述】：

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

}

感谢您的帮助。

【问题讨论】：

标签： android css mobile responsive-design viewport

【解决方案1】：

尝试在元内容中添加width：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

【讨论】：

恐怕没有做到。没有改变。不过谢谢。
当然，我将它添加到问题中。我没有加入 HTML，因为它不会导致问题（在 Firefox Android 上一切正常）
hmm，很难说可能是什么问题，但最好的方法是使用 PHONEGAP 调试器：debug.phonegap.com。检查您的媒体查询规则是否被任何其他规则覆盖或发生了什么。如果您熟悉 Chrome 开发人员工具，那将很容易。祝你好运