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*/
}

以上在我的桌面上的 Firefox、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，因此忽略 (max-width:460) 的媒体查询是完全有道理的。

原帖

因此，这不是一个确定的答案，而是您可以检查的内容列表，我只是将其作为答案发布，以便我可以包含一些格式良好的代码。

滚动条

滚动条（可能）会影响视口的大小，并且您的一个浏览器处理滚动条的方式可能与另一个不同。

视觉与布局视口

视觉视口是您的内容必须显示的大小，因此基本上是您的屏幕大小减去 url 栏、状态栏、滚动条。

但是，如果您的内容不适合我们的视口，它会更大。虚拟视口基本上是从视觉视口的大小推断出的内容的大小。如果这是问题所在，您也许可以使用 <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();

使用该代码创建一个页面，使用所有有问题的浏览器访问它，看看您是否可以发现差异，无论是同一浏览器中的两个值之间还是不同浏览器中的相同值之间的差异。