为什么媒体查询在移动设备上不起作用？

Question

我在 html 页面中使用了媒体查询。适用于小屏幕和大于 500px 的屏幕。这是一个示例。

.col-1 { width: 58%;}
.col-2 {width: 25%;}
.col-3 {width: 16%;}
.col-4 {width: 100%;}


@media only screen and (min-width: 480px) {
 .col-sm-1 {width: 100%;}
 }
 
 
 <body>
 <div class="header col-4 col-sm-1"></div>
 <div class="aside col-2 col-sm-1"></div>
 <div class="main col-1 col-sm-1"></div>
 <div class="right-col col-3 col-sm-1"></div>
 <div class="footer col-4 col-sm-1">

当我将浏览器的 window 调整到 480px 以下时，所有 div 的宽度都变为 100%。但是我将该文件传输到我的手机，并且在手机浏览器中打开文件时，宽度不会更改为 100%。但是缩放级别很好（可读性好）

Answer 1

media only screen and (min-width: 480px) {

需要

@media only screen and (min-width: 480px) {

Answer 2

尝试：

@media only screen and (max-width: 480px) {
 .col-sm-1 {width: 100%;}
 }

这只会在屏幕为 480 像素或以下时应用 100% 的宽度。

如果还是不满意再试试：

@media only screen and (max-width: 480px) {
  .col-1,
  .col-2,
  .col-3 {
  width: 100%;
  }
}

为什么媒体查询在移动设备上不起作用？

Why is the media query not working on mobile?

html

media