徽标不会在实际移动设备上正确显示 [但在更改桌面屏幕大小时会显示]

Question

网站标志在物理移动设备上显示不正确，我使用的是 iPhone X。但是当更改桌面版本的屏幕大小时；徽标适当调整

我正在修改主题，请多多包涵。我试图用 max-width 标签修改大小

自定义 CSS 中的代码：

@media (max-width: 767px){
#logo .retina-logo {
    height: 35%;
    width: 45%;
    margin-top: -2px;
}
}


@media (max-width: 600px){
#logo .retina-logo {
    height: 90%;
    width: 60%;
    margin-top: -2px;
}
}

@media (max-width: 500px){
#logo .retina-logo {
    height: 100%;
    width: 90%;
    margin-top: 4px;
}
}

随时在您的移动设备上查看 www.TattiniBoots 以了解我在说什么。您会注意到徽标非常小，并且在更改桌面屏幕大小时显示的宽度不正确

Answer 1

尝试在 <head>

中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 2

显然您的媒体查询在您的网站上的顺序错误（检查员说规则在第 28 / 19 / 11 行内联 500 / 600 / 767 像素）- 与您在上面的代码中发布的顺序不同.所以只需颠倒这些媒体查询的顺序，否则 767px 规则将在其他规则之后覆盖其他规则。

徽标不会在实际移动设备上正确显示 [但在更改桌面屏幕大小时会显示]

Logo will not display appropriately on Actual Mobile Device [But does when changing desktop screen size]

css

wordpress

mobile

media-queries

responsive-design