Question

帮助！我创建了一个Heroku应用程序，我的CSS3 @media查询不在移动设备上工作（已经检查过手机和平板电脑）。奇怪的是，他们只在网络浏览器上工作（我通过调整chrome和firefox中的页面来检查）。

我已经在我的html文档中包含了视口元标记：

＆lt; meta name =＆＃34; viewport＆＃34; content =＆＃34; width = device-width，initial-scale = 1.0，minimum-scale = 1.0，maximum-scale = 1.0＆＃34; ＆GT;

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

仅@media屏幕和（max-device-width：361px）{

.realstff-wrapper {     身高：88vh;     }

＃gall-box {         display：none;     }

＃img-caption {
  float:right;
  right: 0em;
  height: 20px;
  width: 200px;
}

＃img-block {         身高：100vh;         溢出：隐藏;     }

}

我尝试将@media语法更改为这些样式，但它们似乎都没有做到这一点：

@media（max-width：843px）{}

@media（max-device-width：843px）{}

@media（max-width：843px）和（max-device-width：843px）{}

@media screen（max-device-width：843px）{}

@media screen and（max-device-width：843px）{}

仅@media屏幕和（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 metatag一起使用。

原来我只是没有＆＃34; git commiting＆＃34;我通过命令行正确更改。

... Embarassing..heh

Heroku App的媒体查询在桌面而非移动设备上工作（尽管尝试了多种解决方案）

1 个答案: