html - 适用于桌面而非移动设备的 Heroku App 的媒体查询(尽管尝试了多种解决方案)

Question

帮助!我创建了一个 Heroku 应用程序，但我的 CSS3 @media 查询无法在移动设备上运行(已检查手机和平板电脑)。奇怪的是，它们只适用于网络浏览器(我已经通过调整 chrome 和 firefox 中的页面大小进行了检查)。


我已经在我的 html 文档中包含了视口(viewport)元标记:

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

这是我的@media 查询语法的一部分:

@media only screen and (max-device-width: 361px) {

.realstff-wrapper { height: 88vh; }

#gall-box { display: none; }

#img-caption {

  float:right;
  right: 0em;
  height: 20px;
  width: 200px;

}

#img-block { height: 100vh; overflow: hidden; }

}

我已经尝试将 @media 语法更改为这些样式，但它们似乎都不起作用:

@media (max-width: 843px){ }

@media (max-device-width: 843px){ }

@media (max-width: 843px) and (max-device-width: 843px) { }

@media screen (max-device-width: 843px){ }

@media screen and (max-device-width: 843px){ }

@media only screen and (max-device-width: 843px){ }

@media only screen and (max-device-width: 843px), (max-width: 843px) { }

@media only screen and (max-device-width: 843px), only screen and (max-width: 843px) { }

我真的不明白为什么它会影响到我 :( 感谢能帮助解决这个问题的人。

Answer 1

解决了我自己的问题。我最初使用的 @media 语法实际上与 View 元标记结合使用。

原来我只是没有通过命令行正确地“git 提交”我的更改。

尴尬..呵呵...