ruby on rails 中忽略了媒体查询答案

【问题标题】：Media queries ignored in ruby on railsruby on rails 中忽略了媒体查询
【发布时间】：2018-05-27 18:01:15
【问题描述】：

我正在 Cloud9 Ruby on rails 中创建一个项目。我在 index.html.erb 中只有一个 css 文件：

<!DOCTYPE html>
<html>
<head>
  <title>Workspace</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

我在 Application.css 中放了一个媒体查询：

@media only screen and (min-width: 290px) and (max-width: 640px) and  (-webkit-device-pixel-ratio: 2) { 
  .container2 {
      position:relative;
      background-color:red;
      text-align: center;
      width:100%;
      height:100%;
      border-bottom-style: ridge;
      border-top-style: ridge;
      border-width:10px;
}
  #list {
    font-size: 50px;
  }


  }

如果你访问链接：https://todo-app-back-end-prospeed.c9users.io/?_c9_id=livepreview0&_c9_host=https://ide.c9.io，你会看到.container2在达到600px时没有变红。

【问题讨论】：

标签： html css ruby-on-rails ruby media-queries

【解决方案1】：

您的查询运行良好。检查时需要一些调整。我希望您使用 Chrome 来检查行为。

如果您选择桌面，那么您的 CSS 将正常工作，否则不会。在测试时不要忘记将 DPR 设置为 2.0

要修复，只需在<head> 标签下添加以下内容。

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

【讨论】：

非常感谢，我花了几个小时试图寻找答案
但是，为什么解决了这个问题？