css - 为什么 "device-width"不适用于 Chrome for Android？

Question

我正在引用这个关于如何“make a mobile friendly website.”的指南它似乎没有在我的 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？

Answer 1

据我了解，这只是以下 HTML 元标记的基于 css 的替换:

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

我建议在您的 index.html 中使用上面的元标记 此外，您仍然需要添加 @media 查询以实际使其响应各种屏幕尺寸。

// 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)  ...

除了上述基于PX的断点，还可以使用基于DPI的断点:https://css-tricks.com/snippets/css/retina-display-media-query/

但要真正回答你关于远程调试控制台的问题，我不知道还有什么其他的东西可以像移动版 Chrome 开发者工具 (Ctrl + Shift + M) 一样工作