CSS @media 仅适用于移动 chrome

Question

我一直在尝试为我的网站编辑一些 CSS 并根据浏览器的宽度动态更改 Logo 。

下面是我正在使用的 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 上运行良好。在手机上，它只适用于默认的安卓浏览器。在 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 chrome 上找到。该应用程序与我的版本相同。我在 LG G3 上运行。

因为我使用的是 max-width 而不是 max-device-width DPI 差异应该影响这个吗？？？

谢谢

Answer 1

更新

该死，我刚刚看到你更新了你的问题，它是 LG G3，你的媒体查询不起作用。根据this useful page G3 的宽度为 480，因此您的 (max-width:460) 媒体查询被忽略是完全合理的。

原帖

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

滚动条

滚动条(可能)会影响视口(viewport)的大小，并且您的浏览器中的一个浏览器可能会以不同于其他浏览器的方式处理滚动条。

视觉与布局视口(viewport)

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

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

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