CSS @media不僅適用於移動Chrome瀏覽器

Question

我一直在嘗試爲我的網站編輯一些CSS，並根據瀏覽器的寬度動態更改徽標。

下面是CSS的一部分，我使用它

@media only screen 
and (max-width:460px){ 
    /*logo*/ 
    #main_logo{display:none;} 
    #main_logo_retina{display:block;} 
    .container-fluid{background-color:red;} 
    /*logo*/ 
} 

以上正常工作的火狐，Chrome在我的桌面上。 在移動設備上，它僅適用於默認的Android瀏覽器。在Chrome上它不會。

起初它是不工作的桌面版Chrome，但它是因爲下面的格式 我想通了

@media only screen and (max-width:460px){ 
    /*logo*/ 
    #main_logo{display:none;} 
    #main_logo_retina{display:block;} 
    .container-fluid{background-color:red;} 
    /*logo*/ 
} 

它可以找到一個三星Galaxy S4的鉻。 該應用程序與我的版本相同。我正在LG G3上運行。

因爲我使用的是max-width而不是max-device-width如果DPI的差異影響這個???

謝謝

Answer 1

更新

媽的，我剛纔看到你更新你的問題，它是一個LG G3在您的媒體查詢不工作。根據this useful page G3的寬度是480，所以它是完全有道理的，你的媒體查詢（最大寬度：460）被忽略。

原帖

所以，這不會是一個明確的答案，而是事情你可以檢查，我只是張貼這作爲答案，所以我可以有一些很好的格式化代碼列表。

滾動條

滾動條（可能）會影響您的視口的大小和您的瀏覽器可能會比其他不同的方式處理滾動條的一個。

視覺與佈局視

視覺視口是你的內容必須要顯示的大小，屏幕減去地址欄的所以基本上大小，狀態欄，滾動條。

但是，如果您的內容不適合我們的視口，它會更大。虛擬視口基本上是從視覺視口大小推斷出的內容大小。如果這是問題，則可以使用<viewport>標籤幫助您的瀏覽器。

您可能能夠確定其中的一些可能的原因，您的問題與下面的HTML和JS：

HTML

<p> 
    clientSize: <span id="viewport1"></span> 
</p> 
<p> 
    innerSize: <span id="viewport2"></span> 
</p> 
<button id="recalc">Recalculate</button> 

JS

function calcSize(){ 
    var win = $(window); 
    var size = win.width() + "x" + win.height(); 
    var size2 = window.innerWidth + "x" + window.innerHeight; 
    $('#viewport1').text(size); 
    $('#viewport2').text(size2); 
} 

$('#recalc').click(function(){ 
    calcSize(); 
}); 
calcSize(); 

與創建頁面代碼，請訪問所有瀏覽器並查看是否可以在同一瀏覽器中的兩個值之間或不同瀏覽器中的相同值之間找出差異。