CSS 媒体查询不适用于移动设备，但适用于桌面设备

Question

我在 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

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

Answer 1

确保您用来测试移动版本的设备是 <= 600px。

你可以尝试只使用@media :

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

或者使用 em 代替像素：

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

---

根据您在评论中的反馈，我为您编写了一个片段：

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>

Answer 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

Answer 3

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

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

欲了解更多详情，请阅读以下链接

link Here

Answer 4

我的应用程序在我的本地主机上响应。但是当它通过 AWS Elastic beanstalk 提供服务时不起作用。因为 HTML 文件是在框架集内呈现的，而 beanstalk 提供的文件头中缺少“元标记”