CSS媒体查询在移动设备上不起作用，但在桌面上工作[关闭]答案

【问题标题】：CSS media queries not working on mobile, but work on desktop [closed]CSS媒体查询在移动设备上不起作用，但在桌面上工作[关闭]
【发布时间】：2021-04-06 19:59:18
【问题描述】：

我在我的 HTML 中添加了元标记

<meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0," />

我的媒体查询顺序正确，位于样式表的末尾。（桌面版有效）

@media only screen and (max-width: 600px) {
/* my refactoring code */
}

桌面版是这样的> Desktop version

手机版是这样的> Mobile Version

请帮助我获取适用于移动设备的代码。谢谢！

【问题讨论】：

尝试只使用像@media (max-width: 600px)这样的媒体
试过没有效果:(

标签： html css node.js responsive-design media-queries

【解决方案1】：

确保您用于测试移动版本的设备为

你可以尝试只使用@media：

@media ( max-width:600px ) {
 /* CSS rules here */
}

或者也许使用 em 代替像素：

@media only screen and (max-width:37.5em) { 
    /* CSS rules here */
}

根据你在cmets的反馈，我给你写了一个sn-p：

div {
  height: 150px;
  width: 150px;
}

.myDiv {
  background-color: red;
  /* Other Desktop CSS Rules */
}

@media only screen and ( max-width: 600px) {
  .myDiv {
    background-color: green;
    /* Other Small Devices CSS Rules */
  }
}

<div class='myDiv'>
  That's an amazing div.
</div>

【讨论】：

使用 417px 宽度的移动设备。仅尝试@media 无效。 :(
让我们试试 iPhone 媒体查询：@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-比率：2) { }
试过了 (-webkit-min-device-pixel-ratio: 2) ，也不管用:(

【解决方案2】：

我记得在做一个项目时遇到了这个问题。

有人让我替换：

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

把它改成这样：

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

至少这解决了我的问题。

这个网站有点多：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

【讨论】：

【解决方案3】：

您可以尝试移动设备和平板电脑的媒体 -

@media ( min-width: 320px ) and ( max-width: 480px ) {  
  /* your CSS */  
}

更多详情请阅读以下链接

link Here

【讨论】：

【解决方案4】：

我的应用程序在我的本地主机上响应。但是在通过 AWS Elastic beanstalk 提供服务时无法正常工作。因为 HTML 文件在框架集中呈现，并且 beanstalk 提供的文件头中缺少“元标记”

【讨论】：