为什么我的CSS 3媒体查询不适用于移动设备？

Question

为什么我的CSS 3媒体查询不适用于移动设备？在styes.css中，我使用的是媒体查询，这两个查询都使用了以下两个变量：/*--[ Normal CSS styles ]----------------------------------*/@media only screen and (max-width: 767px) {     /*--[ Mobile styles go here]---------------------------*/}当我缩小窗口时，这些站点调整到我想要的常规浏览器(Safari，Firefox)的布局，但是手机上根本没有显示移动布局。相反，我只看到默认的CSS。谁能给我指明正确的方向？

Answer 1

所有这些都是有用的提示，但看起来我需要添加一个元标记：

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

现在它似乎既适用于Android(2.2)，也适用于iPhone。

Answer 2

不要忘记有标准的CSS声明上边媒体查询或查询也不能工作。

.edcar_letter{
    font-size:180px;}@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }}

Answer 3

我在一个新闻站点中使用了引导程序，但它在IE8上不起作用，我使用了CSS 3-mediaqueries.js javascript，但仍然不能工作。如果希望媒体查询处理此javascript文件，请将屏幕添加到CSS中的媒体查询行中。

以下是一个例子：

<meta name="viewport" content="width=device-width" /><style>
     @media screen and (max-width:900px) {}
     @media screen and (min-width:900px) and (max-width:1200px) {}
     @media screen and (min-width:1200px) {}</style><link rel="stylesheet" type="text/css" href="bootstrap.min.css">
     <script type="text/javascript" src="css3-mediaqueries.js"></script>

CSS链接线和上线一样简单。