Css 为什么是；“设备宽度”；不在Android的Chrome上工作？

我参考了这篇关于如何“使用”的指南，它似乎并没有在我的Android Chrome浏览器上生效

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

我在

app.css

中将它添加到我的Django静态文件中，它肯定在网站上，因为我可以在笔记本电脑上使用Chrome开发者工具查看它。然而，当我使用我的Android手机（Galaxy S8，如果有必要的话）时，它不适合屏幕

在我的

base.html

中，我的整个网站都在使用它：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

---

一些后续问题：我需要清空手机上的缓存吗？如何在手机上使用Chrome开发者工具检查网站的CSS

使用

据我所知，这只是对以下HTML元标记的基于css的替换：

<meta name="viewport" content="width=device-width, initial-scale=1">

除了上述基于PX的断点外，还可以使用基于DPI的断点：

---

但要真正回答您关于远程调试控制台的问题，我不知道还有什么其他的东西可以使用，比如Chrome Developer tools for mobile（Ctrl+Shift+M）

不幸的是，我也有这个功能。我会更新以反映。谢谢！我没有听说过基于新闻部的断点。我会试试这个，然后再打给你。出于某种原因，这在手机上并不奏效。我有一个AJAX的DataTables，它一直在屏幕上消失。。。我很惊讶没有一个真正简单的解决方案！但我知道这是一个复杂的问题。向上投票b/c这无疑改善了桌面布局。

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px)  ... 

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px)  ... 

// Medium devices (tablets, less than 992px)
@media (max-width: 991px)  ...