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

link Here

Answer 4

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

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

CSS media queries not working on mobile, but work on desktop

html

css

node.js

media-queries

responsive-design