媒体查询，移动设备无响应

Question

这个问题出在我的投资组合网站http://www.sierraisadesigner.com。

媒体查询在 Firefox 中运行良好，但在我尝试过的任何其他浏览器或任何移动设备上都无法运行。我试过 iPad 第一代、iPod 和 Kindle Fire（也是第一代）。

我的代码针对的是相当广泛的屏幕尺寸：

@media only screen and (min-width:700px) and (max-width:959px) {
    .wrapper-900 { width:100%; background:#ccc;}

    #content-bg { padding:20px 0px 0px 0px; }

    .width-200 { width:25%; }
    .width-550 {width:65%; }

    #footer { padding:15px; }
    .footer-module { width:25%; }
} 

@media only screen and (min-width:550px) and(max-width:699px) {
    .wrapper-900 { width:100%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 10px 10px 10px; }

    .width-200 { width:25%; }
    .width-550 { width:65%; }

    TEXTAREA { width:90%; height:200px; }
    INPUT[type=text] { width:90%; }

    #footer { padding:10px; }
    .footer-module { width:25%; }
} 

@media only screen and (min-width:430px) and (max-width:549px) {
    .wrapper-900 { width:100%; }

    HEADER LI { background:#CCEFFF; padding:10px 15px 10px 15px; }
    #header-nav { width:100%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 0px 0px 0px; }
    .article { padding:15px 15px 15px 15px; }

    .width-200 { width:90%; padding:10px; }
    .width-550 { width:100%; }

    FORM { text-align:center; }
    TEXTAREA { width:80%; height:200px; }
    INPUT[type=text] { width:80%; }

    #footer { padding:10px; }
    .footer-module { width:30%; }
} 

@media only screen and (min-width:320px) and (max-width:429px) {
    .wrapper-900 { width:100%; }

    .header-swirl { visibility:hidden; font-size:0.1em; }
    .header-name { font-size:1.8em; }

    HEADER LI { background:#CCEFFF; padding:7px; }
    HEADER UL { padding:0px; width:100%; }
    #header-nav { margin:10px 0px 10px 0px; }

    .slider-img img { width:150%; float:left; margin-left:-50%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 0px 0px 0px; }
    .article { padding:15px 15px 15px 15px; }

    .width-200 { width:90%; padding:10px;}
    .width-550 { width:100%; }

    FORM { text-align:center; }
    TEXTAREA { width:80%; height:200px; }
    INPUT[type=text] { width:80%; }

    #footer { padding:10px; }
    .footer-module { width:90%; }
}

我也尝试过使用 max-device-width 而不是 max-width（或 min-width），它在 iPad 上可以工作，但在 Firefox 中没有响应，在 Chrome 中的行为非常奇怪。帮助！我错过了什么？？

Answer 1

您没有视口元标记：

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

Here's 对整个视窗交易如何运作的（相当长的）有用的解释。