媒體不工作

我的CSS使用媒體查詢無法正確檢測設備...查詢我的代碼：媒體不工作

@media screen and (min-width: 240px) and (max-width: 320px) { 
    #test{ 
     width:50px; 
     height:50px; 
     background-color:blue; 
    } 
} 
@media screen and (min-width: 640px) { 
    #test{ 
     width:50px; 
     height:50px; 
     background-color:red; 
    } 
}

我想股利是一個小的手機如HTC野火和紅色上藍色像iPad Mini這樣的平板電腦。

來源

2013-04-02 Jacob

你可以在'@media screen和'後指定'screen'並且' – Ranjith

Passerby我是這麼做的。但是我也在較小的設備上獲得藍色的div！ – Jacob

默認情況下，小設備上的瀏覽器往往會放大一點。您可能還需要在頁面上指定''來觸發「真實」維度。要進行調試，請檢查'document.body.getBoundingClientRect（）'以查看頁面的「呈現」維度。 – Passerby

嘗試在查詢中添加屏幕。

@media screen and (min-width: 240px) { 
    #test{ 
     width:50px; 
     height:50px; 
     background-color:blue; 
    } 
} 
@media screen and (min-width: 640px) { 
    #test{ 
     width:50px; 
     height:50px; 
     background-color:red; 
    } 
}

來源

2013-04-02 11:37:32 Kaloyan

可悲的是不行！ – Jacob

從註釋擴展：

瀏覽器上的小型設備往往縮放網頁一點點。要獲得媒體查詢的「真實」維度，請將

<meta name="viewport" content="initial-scale=1.0" />

添加到文檔的頭部。

要檢查「繪製的」尺寸，使用這樣的：

<script type="text/javascript"> 
window.addEventListener("load",function(){ 
    var box=document.body.getBoundingClientRect(); 
    document.getElementById("whatever").value=box.width+" x "+box.height; 
},false); 
</script>

這可能會或可能不會阻止瀏覽器本身的規模設置，但至少會防止「自動」縮放。

以我自己的經驗，有些情況下，如長句子<p>可能會導致瀏覽器縮小，使它更像「一句話」的感覺。通過指定initial-scale=1.0，Opera Mobile仍然可以縮放到其設置（默認爲125％），但不會超過此設置，並且長句將自動換行。

來源

2013-04-03 03:07:11 Passerby

回答

相關問題