Responsive design Chrome响应速度与Firefox不同

对不起，我的英语

我确实尝试为三星SM-J810F Galaxy J8 1480 x 720编写媒体查询

我写媒体查询

@media only screen and (device-width: 30.8125em) 
               and (device-height: 15em)
               and (-webkit-min-device-pixel-ratio: 2)
               and ( min--moz-device-pixel-ratio: 2)
               and (orientation: landscape)  {

下面是如何在Firefox上显示

如何在Chrome上显示

如何看，在Chrome上显示导航不同…，还有一个元素，我不会显示它，它显示在Chrome上，但不会显示在Firefox上

请任何人解释我的错误，因为在Chrome上显示这个元素

---

非常感谢你的回答

我觉得您的媒体查询有问题，因为它包含webkit和mozilla供应商前缀，所以我不确定它是否会给出您期望的结果

我有两个建议你可以试试

（1） 将媒体查询重写为

@media 
only screen and (device-width: 30.8125em) 
               and (device-height: 15em)
               and (-webkit-min-device-pixel-ratio: 2)
               and (orientation: landscape),

 only screen and (device-width: 30.8125em) 
               and (device-height: 15em)
               and ( min--moz-device-pixel-ratio: 2)
               and (orientation: landscape)  {  

或

（2） 使用更加经得起未来考验的dppx语法
来源

---

祝你好运，我希望这些建议中的一个对你有用

非常感谢您的推荐，但两人都不使用Chrome。。。在这里，您可以显示我对台式机、平板电脑和智能手机的媒体查询，您好，您在尝试瞄准特定设备时并没有让自己的生活变得轻松；）这有点冒险，因为我不确定我在寻找什么，但这是否更好？谢谢，您有什么建议我为台式机、平板电脑和智能手机创建媒体查询文件？

@media 
only screen and (device-width: 30.8125em) 
               and (device-height: 15em)
               and (min-resolution: 2dppx) 
               and (orientation: landscape)  {