Html 响应css在移动设备上不起作用。我为视口添加了元标记。但是它'；他正在使用浏览器。

我正在旧网站上工作，以使其响应。我在中为viewport添加了meta标记，并为响应css添加了一个css文件。但它不适用于移动设备。当屏幕调整到480px以下时，它在桌面浏览器上工作正常。 下面是链接

您还需要设置移动设备的“初始比例”

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

---

有关的详细信息，您已经以像素（

px

）为单位给出了所有

s
宽度。它应该是
最大宽度
。您的web应用程序中的所有
都定义了
宽度
，请将它们全部替换为
最大宽度

TLDR

使用
最大宽度代替容器所有位置的
宽度
。例如：
#标题
，
#绿色背景
，等等

希望这有帮助
 对于初学者，在CSS中添加媒体查询，例如：

@media screen and (max-width : 480px){
  .col, #sidebar{
  display:block !important;
  float:none !important;
  width:100% !important;

}

这将使列响应小于480px的设备

例如：


同样，为CSS中的所有元素编写不同大小的代码，或者使用响应性CSS框架使其更快
对不起，伙计们，我错了
以错误的方式添加媒体查询
@仅介质屏幕和（最大设备宽度：480px）

现在修好了

谢谢你的回复
 哎呀！不要介意颜色，我使用的是深色主题扩展，我添加了响应css。它的老站点有固定的div大小，我只是用一个额外的css使其响应。它可以在浏览器上工作，但不能在移动设备上工作。是的，我已经设置了“初始比例”，但仍然不工作，我的css文件。它的老网站我只是想让它的响应。是的，它的所有宽度设置在像素的老网站。所以我为手机添加了新的css文件。当您将浏览器的大小调整为480px时，它会工作。但不是在手机上。