为什么我的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&nbsp;content="width=device-width,&nbsp;initial-scale=1"&nbsp;name="viewport"&nbsp;/>现在它似乎既适用于Android(2.2)，也适用于iPhone。

Answer 2

不要忘记有标准的CSS声明上边媒体查询或查询也不能工作。.edcar_letter{ &nbsp;&nbsp;&nbsp;&nbsp;font-size:180px;}@media&nbsp;screen&nbsp;and&nbsp;(max-width:&nbsp;350px)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;.edcar_letter{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:120px; &nbsp;&nbsp;&nbsp;&nbsp;}}

Answer 3

我在一个新闻站点中使用了引导程序，但它在IE8上不起作用，我使用了CSS 3-mediaqueries.js javascript，但仍然不能工作。如果希望媒体查询处理此javascript文件，请将屏幕添加到CSS中的媒体查询行中。以下是一个例子：<meta&nbsp;name="viewport"&nbsp;content="width=device-width"&nbsp;/><style> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@media&nbsp;screen&nbsp;and&nbsp;(max-width:900px)&nbsp;{} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@media&nbsp;screen&nbsp;and&nbsp;(min-width:900px)&nbsp;and&nbsp;(max-width:1200px)&nbsp;{} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@media&nbsp;screen&nbsp;and&nbsp;(min-width:1200px)&nbsp;{}</style><link&nbsp;rel="stylesheet"&nbsp;type="text/css"&nbsp;href="bootstrap.min.css"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type="text/javascript"&nbsp;src="css3-mediaqueries.js"></script>CSS链接线和上线一样简单。