blocks|key|533844|text|这三个都是有用的提示，但看起来我需要添加一个meta标签：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|533845|<meta+content="width=device-width,+initial-scale=1"+name="viewport"+/>|code-block|syntax|javascript|533846|现在它似乎在Android+(2.2)和iPhone上都可以工作了。|533847|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

All three of these were helpful tips, but it looks like I needed to add a meta tag:

<pre><code>&lt;meta content="width=device-width, initial-scale=1" name="viewport" /&gt;
</code></pre>

Now it seems to work in both Android (2.2) and iPhone all right...

blocks|key|533800|text|我怀疑关键字only可能是这里的问题所在。我使用这样的媒体查询没有问题：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|533801|@media+screen+and+(max-width:+480px)+{+}|533802|entityMap^0|6|4|0|0|14|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

I suspect the keyword <code>only</code> may be the issue here. I have no issues using media queries like this:

<code>@media screen and (max-width: 480px) { }</code>

blocks|key|750384|text|我在一个新闻网站上使用了bootstrap，但它在IE8上不起作用，我使用了css3-mediaqueries.js+javascript，但仍然不起作用。如果希望媒体查询与此javascript文件一起使用，请在css中将屏幕添加到媒体查询行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|750385|下面是一个示例：|750386|<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>|code-block|syntax|javascript|750387|css链接行和上面的行一样简单。|750388|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css 

here is an example :

<pre><code>&lt;meta name="viewport" content="width=device-width" /&gt;


&lt;style&gt;
 @media screen and (max-width:900px) {}
 @media screen and (min-width:900px) and (max-width:1200px) {}
 @media screen and (min-width:1200px) {}
&lt;/style&gt;

&lt;link rel="stylesheet" type="text/css" href="bootstrap.min.css"&gt;
&lt;script type="text/javascript" src="css3-mediaqueries.js"&gt;&lt;/script&gt;
</code></pre>

css Link line as simple as above line.

blocks|key|750459|text|今天我也遇到了类似的情况。媒体查询不起作用。过了一段时间，我发现'and‘后面的空格不见了。正确的媒体查询应如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|750460|@media+screen+and+(max-width:+1024px)+{}|code-block|syntax|javascript|750461|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Today I had similar situation. Media query did not work. After a while I found that space after 'and' was missing.
Proper media query should look like this:

<pre><code>@media screen and (max-width: 1024px) {}
</code></pre>

blocks|key|534451|text|包含下面这样的meta标签可能会导致浏览器以不同的方式处理视口缩放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|534452|<meta+content="width=device-width,+initial-scale=1"+name="viewport"+/>|offset|length|style|CODE|534453|entityMap^0|0|0|1Y|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Including a meta tag like below can cause the browser to handle the viewport zooming differently.

<code>&lt;meta content="width=device-width, initial-scale=1" name="viewport" /&gt;</code>

blocks|key|750802|text|css代码的顺序也很重要，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|750803|@media(max-width:600px){
++.example-text{
+++++color:red;
+++}
}
.example-text{
+++color:blue;
}|code-block|syntax|javascript|750804|上面的代码将不会工作，因为执行的命令。需要编写如下代码：|750805|.example-text{
+++color:blue;
}
@media(max-width:600px){
++.example-text{
+++++color:red;
+++}
}|750806|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The sequential order of css code also matters, for example:

<pre><code>@media(max-width:600px){
 .example-text{
 color:red;
 }
}
.example-text{
 color:blue;
}
</code></pre>

the above code will not working because the executed order. Need to write as following：

<pre><code>.example-text{
 color:blue;
}
@media(max-width:600px){
 .example-text{
 color:red;
 }
}
</code></pre>

blocks|key|750521|text|如果浏览器缩放级别不正确，也可能发生这种情况。您的浏览器窗口缩放应为100%25。在Chrome中，使用Ctrl+%2B+0重置缩放级别。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|750522|entityMap^0|1E|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

It may also happen if the browser zoom level is not correct. Your browser window zoom should be 100%. In Chrome use <code>Ctrl + 0</code> to reset the zoom level.

blocks|key|750570|text|我最近也遇到了这个问题，后来我发现这是因为我没有在and和(之间留出空格。这就是错误|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|750571|@media+screen+and(max-width:768px){
}|code-block|syntax|javascript|750572|然后我把它改成这样来纠正它。|750573|@media+screen+and+(max-width:768px){
}|750574|entityMap^0|P|3|T|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

I encountered this issue recently too, and I later found out it was because I didn't put a space between <code>and</code> and <code>(</code>.
This was the error

<pre><code>@media screen and(max-width:768px){
}
</code></pre>

Then I changed it to this to correct it

<pre><code>@media screen and (max-width:768px){
}
</code></pre>

blocks|key|534225|text|把另一个答案扔到拳台上。如果你试图使用CSS变量，那么它将会悄悄地失败。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|534226|@media+screen+and+(max-device-width:+var(--breakpoint-small))+{}|code-block|syntax|javascript|534227|CSS变量在媒体查询中不起作用(根据设计)。|534228|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Throwing another answer into the ring. If you're trying to use CSS variables, then it will quietly fail.

<pre><code>@media screen and (max-device-width: var(--breakpoint-small)) {}
</code></pre>

CSS variables don't work in media queries (by design).

blocks|key|750728|text|奇怪的原因我以前从未见过:如果你在媒体查询之外使用了一个“父>子”选择器(在Firefox69中)，它可能会中断媒体查询。我不确定为什么会发生这种情况，但对我的情况来说，这不起作用……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|750729|@media+whatever+{
++++#child+{+display:+none;+}
}|code-block|syntax|javascript|750730|但是添加父元素来匹配页面上的其他CSS，这是可行的……|750731|#parent+>+#child+{+display:+none;+}|750732|指定父对象似乎无关紧要，因为id是非常具体的，不应该有歧义。也许这是Firefox中的一个bug？|750733|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Weird reason I've never seen before: If you're using a "parent > child" selector outside of the media query (in Firefox 69) it could break the media query. I'm not sure why this happens, but for my scenario this did not work...

<pre><code>@media whatever {
 #child { display: none; }
}
</code></pre>

But adding the parent to match some other CSS further up the page, this works...

<pre><code>#parent &gt; #child { display: none; }
</code></pre>

Seems like specifying the parent should not matter, since an id is very specific and there should be no ambiguity. Maybe it's a bug in Firefox?

blocks|key|533737|text|根据情况，我使用了一些方法。在相同的样式表中，我使用：@media+(max-width:+450px)，或者对于单独的样式表，请确保在标题中有正确的链接。我看了一下你的补丁，发现你有一堆令人困惑的css链接。正如你所说，它也在HTC+desire+S上起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|533738|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I use a few methods depending.
In the same stylesheet i use: @media (max-width: 450px), or for separate make sure you have the link in the header correctly. I had a look at your fixmeup and you have a confusing array of links to css. It acts as you say also on HTC desire S.

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

.username+{
++margin-bottom:+20px;
++margin-top:+10px;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|533880|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>@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;
}
</code></pre>

blocks|key|534728|text|由于没有打字错误不适用于我的媒体屏幕和(max-width:+930px)需要在(和)和(max-width:+930px)和(max-width:930px)之间有空格|type|unstyled|depth|inlineStyleRanges|entityRanges|data|534729|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

due to only not typo mistake not work for me
@media screen and(max-width: 930px) require sopace between the (and) &amp; opening bracket @media screen and (max-width: 930px)

blocks|key|534037|text|对我来说，我指出的是max-height而不是max-width。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|534038|如果是你，那就去改变它吧！|534039|++++@media+screen+and+(max-width:+350px)+{++++//+Not+max-height
++++++++.letter{
++++++++++++font-size:20px;
++++++++}
++++}|code-block|syntax|javascript|534040|entityMap^0|A|A|N|9|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

For me I had indicated <code>max-height</code> instead of <code>max-width</code>.

If that is you, go change it !

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

blocks|key|534519|text|对于每个有相同问题的人，确保你实际写的是"120px“，而不是只写"120”。这是我的错误，它把我逼疯了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|534520|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

For everyone having the same issue, make sure you actually wrote &quot;120px&quot; instead of only &quot;120&quot;. This was my mistake and it drove me crazy.

blocks|key|751021|text|好吧，在我的例子中，宽度值后面的px丢失了...有趣的是，W3C+validator甚至没有注意到这个错误，只是默默地忽略了这个定义。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|751022|entityMap|0|LINK|mutability|MUTABLE|url|https://jigsaw.w3.org/css-validator/validator^0|G|2|T|D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Well, in my case, the <code>px</code> after the width value was missing ... Interestingly, the <a href="https://jigsaw.w3.org/css-validator/validator" rel="nofollow noreferrer">W3C validator</a> did not even notice this error, just silently ignored the definition.

blocks|key|751081|text|我也遇到了同样的问题，结果发现我的媒体查询顺序错了。它们应该在CSS中从宽到小进行定义|type|unstyled|depth|inlineStyleRanges|entityRanges|data|751082|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I was having this same problem and it turns out my media queries were in the wrong order. They should be defined from widest to smallest in the CSS

In the styles.css, I am using media queries, both of which use a variation of:

<pre><code>/*--[ Normal CSS styles ]----------------------------------*/

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

 /*--[ Mobile styles go here]---------------------------*/
}
</code></pre>

The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.

Can anyone point me in the right direction?

Why are my CSS3 media queries not working on mobile devices?

Android

在styles.css中，我使用的是媒体查询，这两种查询都使用以下变体：/*--[ Normal CSS styles ]----------------------------------*/@media only screen and (max-width: 767px) {    /*--[ Mobile styles go here]---------------------------*

问为什么我的CSS3媒体查询在移动设备上不起作用？
EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的CSS3媒体查询在移动设备上不起作用？EN

回答 17

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的CSS3媒体查询在移动设备上不起作用？
EN