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

据我了解，这仅仅是基于CSS的以下HTML元标记的替代：

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

我建议您在index.html中使用上面的meta标签，此外，您仍然需要添加@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）

Answer 2

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

为什么“设备宽度”在Android版Chrome上无法使用？

2 个答案: