为什么我的 CSS3 媒体查询没有显示在移动设备上？答案

【问题标题】：Why are my CSS3 media queries not showing up on mobile device?为什么我的 CSS3 媒体查询没有显示在移动设备上？
【发布时间】：2013-04-01 22:16:19
【问题描述】：

我有一部 iPhone 4。我知道分辨率在我的风格参数范围内。然而，我在智能手机上看到了全角布局。

我可以用一双新鲜的眼睛查看源代码并让我知道我是否遗漏了一些明显的东西吗？它会显示在我的浏览器中，但不会显示在设备上。

http://georgiaderm.com/mobile/

在我的 HTML 中：

<meta name="viewport" content="width=device-width, initial-scale=1">

在我的 CSS 中：

/* ---------------------------------------------------------------------- */
/*  Media Queries
/* ---------------------------------------------------------------------- */

//* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width:1000px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width:768px) and (max-width:1000px) {
    body {padding:10px 4px; width:760px;}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width:768px) {
    html {background:#fff; padding:10px;}
    body {box-shadow:none; margin:0; padding:0; width:auto;}
    body > nav {display:none;}
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width:480px) and (max-width:768px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:480px) {
    .alpha, .omega {float:none;}
    .alpha > * {margin:10px auto;}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width:320px) {
    footer div {float:none; width:auto;}
}

编辑：简化它。

当我在这里时，任何人都有在小型设备上停用 JS 选项卡的轻量级策略？

【问题讨论】：

为什么不向我们提供您的媒体查询，这样我们就不必挖掘 90% 的不相关代码
完成。对此感到抱歉。

标签： jquery-ui css mobile media-queries jquery-tabs

【解决方案1】：

我在我的媒体查询上专门定义了 0px，例如：

@media only screen and (min-width:0px) and (max-width:1000px)
{
    /* STYLES GO HERE */
}

也许这会有所帮助？

【讨论】：

【解决方案2】：

好的，虽然我没有解开这个谜团，但我将移动样式移到了网站的其他部分，它们突然起作用了。我想我在 mobile.css 上的 CSS 特异性有一些奇怪的地方，但是一旦我将媒体查询移到我的 main.css 上，一切都很好。

谢谢大家的帮助。

【讨论】：