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

113

在styles.css中，我使用的媒体查询，它们都使用的变化：为什么我的CSS3媒体查询不适用于移动设备？

/*--[ Normal CSS styles ]----------------------------------*/ 

@media only screen and (max-width: 767px) { 

    /*--[ Mobile styles go here]---------------------------*/ 
}

的站点调整到我想在一个普通的浏览器（Safari浏览器，火狐）当我缩小布局窗口，但是，手机上根本没有显示移动设备布局。相反，我只看到默认的CSS。

任何人都可以指向正确的方向吗？

来源

2011-10-22 redconservatory

是什么手机？媒体查询是CSS中的一项新功能，并非所有的手机浏览器都支持它... – Sparky

iPhone 4和我也在测试320 x 480分辨率的Android手机（2.2 Froyo）。 – redconservatory

其实我切换到iPhone 4上的以下媒体查询和它的作品（但我必须改变我的CSS以适应更高的分辨率）@media唯一屏幕和（-webkit-min-device-pixel-ratio：2）{} – redconservatory

300

所有这三个都是有用的技巧，但它看起来像我需要添加meta标签：

<meta name="viewport" content="width=device-width" />

现在它似乎在Android（2.2）和iPhone都可以正常工作...

来源

2011-10-22 15:58:55 redconservatory

+36

其实 – EnchanterIO

我使用几种方法。在我使用的相同样式表中：@media（max-width：450px），或者单独确保正确地在标题中包含链接。我看了一下你的fixmeup，并且你有一个混乱的css链接数组。它的行为就像你说的HTC欲望S.

来源

2011-10-22 12:27:34 Benteh

再次看看CSS，谢谢...很高兴知道它在某些方面有效。 – redconservatory

我怀疑关键字only可能是这里的问题。我有使用媒体查询像这样没有任何问题：

@media screen and (max-width: 480px) { }

来源

2011-10-22 12:30:12

我在一个新闻网站使用引导，但它不能在IE8上工作，我用css3-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链接线那么简单，以上线。

来源

2013-08-31 10:58:13 user1290329

@media all and (max-width:320px)and(min-width:0px) { 
    #container { 
    width: 100%; 
    } 
    sty { 
    height: 50%; 
    width: 100%; 
    text-align: center; 
    margin: 0; 
    } 
} 

.username { 
    margin-bottom: 20px; 
    margin-top: 10px; 
}

来源

2015-03-04 10:13:32

请给你的代码添加一些解释，说明它是如何解决这个问题的 - 这将在未来帮助其他人，你的答案更有可能得到提高 –

虽然这段代码可以解决这个问题，但[包括解释]（http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）确实有帮助以提高您的帖子的质量。请记住，您将来会为读者回答问题，而这些人可能不知道您的代码建议的原因。 – Ferrybig

今天我有类似的情况。媒体查询无效。过了一段时间，我发现'and'后的空间不见了。正确的媒体查询应该是这样的：

@media screen and (max-width: 1024px) {}

来源

2015-04-07 10:48:42 dklog79

这就是为什么我们有CSS验证器。这与这个特定问题无关，因为OP已经指出媒体查询实际上在非移动浏览器中工作。 – cimmanon

仍然觉得这有帮助，因为它是我的情况下的问题 –

不要忘了有标准的CSS声明以上媒体查询或查询将不能工作。

.edcar_letter{ 
    font-size:180px; 
} 

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

来源

2016-05-03 16:13:32 The4thIceman

事实上，你的CSS样式从标准尺寸到最小尺寸按照递减顺序堆叠。规则仍然适用如果您的媒体查询全部在同一个文件中。 –

适用于我，即使我没有针对所述课程的标准css声明。 – Mason

确保你的CSS注释所有使用这个标记/* ... */ - which is the correct comment markup for css according to MDN

我抄袭自举4个媒体查询直接从他们的文档和每个查询都标有相同的JavaScript风格的注释标记//！

此外，IntelliJ文本编辑器允许我在LESS文件中注释掉特定的css行，但会自动使用//。这不是免费软件，所以我认为它是正确的。有一个用于纠正这种行为的首选项菜单。

另外，验证你的css与一个值得信赖的在线验证。Here's one by W3

来源

2017-01-24 22:00:26

OP已经使用正确的注释标记*，如后*所示。 – TylerH

对我而言，我表示的是max-height而不是max-width。

如果那是你，去改变它！

@media screen and (max-width: 350px) { // Not max-height 
     .letter{ 
      font-size:20px; 
     } 
    }

来源

2017-12-12 14:55:46

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

回答

相关问题