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|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|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|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|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|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|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|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|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|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|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

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)

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 sty...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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