Question

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

我是否可以看到一双新鲜的眼睛来查看来源，如果我遗漏了明显的东西，请告诉我？它显示在我的浏览器中，但不显示在设备上。

在我的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标签？

Answer 1

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

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

也许这会有所帮助？

Answer 2

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

感谢所有人的帮助。

为什么我的CSS3媒体查询没有出现在移动设备上？

2 个答案: