針對移動設備不工作的CSS媒體查詢

我正在使用媒體查詢來開始使我的網站更具響應能力。但是，媒體查詢在我的PC（Chrome）上工作得很好，但在移動設備（iPad和iPhone）上查看時，媒體查詢似乎不起作用。我在頭的視口標籤，但我猜我失去了別的東西....針對移動設備不工作的CSS媒體查詢

CSS

@media (min-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText { 
     color: pink; 
    } 
} 
@media (min-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText { 
     color: blue; 
    } 
} 
@media (min-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText { 
     color: red; 
    } 
} 
@media (min-width:961px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText { 
     color: yellow; 
    } 
} 
@media (min-width:1025px) { 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText { 
     color: green; 
    } 
} 
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText { 
     color: purple; 
    } 
}

HTML

<meta charset=utf-8> 
<meta http-equiv=X-UA-Compatible content="IE=edge"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 

<div id="mainText"> 
    <h1>Text</h1> 
    <h2>Text</h2> 
</div>

來源

2016-07-25 mwilson

小/大嘗試遠程調試的網頁。一切看起來不錯，它應該工作。另外作爲一個方面說明手機使用非常沉重的緩存，所以嘗試一個隱私瀏覽選項卡，以確保您的新樣式應用。 –

1281px的屏幕仍然會觸發@media（min-width：320px）。你應該嘗試範圍。 –

我同意範圍。現在，我只是想讓它工作。我嘗試在我的iPad和iPhone上的Chrome中打開「隱身標籤」，並且查詢仍然無效......當我在我的設備上看到該頁面時，#mainText文本爲黑色... – mwilson

似乎有一個過濾器在您的css

filter: brightness(1%);

現在因爲您沒有爲webkit添加任何供應商前綴，Chrome只是決定忽略它。您可以刪除此規則或將以下內容添加到您的css中。

-webkit-filter: brightness(1%); 
filter: brightness(1%);

乾杯和快樂編碼！

來源

2016-07-25 01:30:00

我使用了什麼選擇器？我似乎有同樣的問題。另外，你是怎麼看到mwilson有過濾器的？ – JimJimL

@JimJimL只要類名在HTML中匹配，就可以使用任何選擇器。我只是瀏覽了Chrome瀏覽器的開發者控制檯，發現Chrome並沒有應用這種風格。乾杯! –

現在我很困惑，你在哪裏得到他的應用程序/網頁，通過開發人員工具中的CSS？我無法將它鏈接到任何地方。這也意味着我需要將亮度（1％）應用於所有對象！？我確定我在這裏錯過了一些東西。 – JimJimL

當你的查詢可能會覆蓋本身嘗試類似的東西指定最小和最大寬度爲您的查詢總是1px的比前一個

@media (max-width:320px) { 
    /* smartphones, iPhone, portrait 480x320 phones */ 
    #mainText { 
     color: pink; 
    } 
} 
@media (min-width:321px) and (max-width:481px) { 
    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    #mainText { 
     color: blue; 
    } 
} 
@media (min-width:482px) and (max-width:641px) { 
    /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    #mainText { 
     color: red; 
    } 
} 
@media (min-width:642px) and (max-width:1024px) { 
    /* tablet, landscape iPad, lo-res laptops ands desktops */ 
    #mainText { 
     color: yellow; 
    } 
} 
@media (min-width:1025px) and (max-width:1280px){ 
    /* big landscape tablets, laptops, and desktops */ 
    #mainText { 
     color: green; 
    } 
} 
@media (min-width:1281px) { 
    /* hi-res laptops and desktops */ 
    #mainText { 
     color: purple; 
    } 
}

來源

2016-07-25 01:43:30

針對移動設備不工作的CSS媒體查詢

回答

相關問題