媒体查询在移动设备上无法正常工作答案

【问题标题】：Media queries not working properly on mobile媒体查询在移动设备上无法正常工作
【发布时间】：2015-06-01 01:40:05
【问题描述】：

我目前正在开发一个网站，我注意到我的媒体查询在 chrome 模拟器上运行良好，但在我的手机上却不行。基本上，在我的手机上，所有内容似乎都被推到了右侧，即使我水平滚动，我也看不到所有内容。什么会导致这个问题？

视口：

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

我在这个例子中使用了媒体查询：

@media screen and (min-width: 840px) and (max-width : 1280px){...}

application.css：

html,
body {
  height: 100%;
  font-family: 'Lato', sans-serif;
  /*margin-top: 30px;*/
}

.nav.navbar-nav {
  position: fixed;
  top: 25px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  top: 45%;
}

.nav.navbar-nav li {
  text-transform: uppercase;
}

.nav.navbar-nav li a {
  /*text-shadow: 1px 1px 1px rgb(131, 131, 131);*/
  /*color: white;*/
  color: rgb(48, 48, 48);
  font-size: 1em;
}

.navbar-inverse .navbar-brand { color: rgb(48, 48, 48); }

.navbar.navbar-inverse.navbar-fixed-top {
  background: -webkit-gradient(linear, center bottom, center top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 1)));
  border-color: transparent;
  border-bottom: none;
  height: 60px;
}

.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
  color: #AA052A;
}

/*footer {
  margin: 50px 0;
}*/

@media only screen and (min-width: 768px) and (max-width : 991px) {

  .nav.navbar-nav {
    width: 60%;
  }

}

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

  .container {
    -webkit-text-size-adjust: none;
    width: 100%;
  }

  .navbar-toggle {
    background-color: #333;
  }

  .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
    background-color: #AA052A;
    border-color: #AA052A;
  }

  .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: transparent;
  }

  .nav.navbar-nav {
    top: 130px;
    left: 88%;
    width: 24%;
    margin-right: 15px;
  }

  .nav.navbar-nav li {
    background-color: rgba(226, 226, 226, 1);
  }

}

services.css：

body { 
  background-color: white; 
  overflow: hidden;
}

#services {
  margin-top: 3%;
  width: 77%;
  position: absolute;
  top: 85px;
  left: 50%;
  transform: translate(-50%);
}

#services h1 {
  font-family: 'Great Vibes', cursive;
  font-size: 3em;
  color: #AA052A;
  /*font-weight: 700;*/
}

#p_services {
  padding: 0px 40px 0px 0px;
  line-height: 2;
  width: 70%;
  text-align: justify;
  color: black;
  font-weight: 300;
  font-size: 1.3em;
  display: inline-block;
}

#services img {
  float: right;
  width: 30%;
}

@media only screen and (min-width: 840px) and (max-width : 1280px) {

  #services h1 {
    font-size: 2.5em;
  }

  #p_services {
    width: 65%;
    font-size: 1.1em;
    padding: 0px 20px 0px 0px;
  }

  #services img {
    width: 33%;
  }

}

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

  body { 
    overflow: visible;
  }

  #services h1 {
    font-size: 2em;
  }

  #p_services {
    font-size: 1.1em;
    width: 100%;
    padding: 0;
  }

  #services img {
    margin: 20px 0px;
    width: 100%;
  }

}

layouts.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href='http://fonts.googleapis.com/css?family=League+Script|Rouge+Script|Parisienne|Niconne|Marck+Script|Allura|Alex+Brush|Tangerine:400,700|Great+Vibes|Dancing+Script:400,700|Pinyon+Script|Rochester|Sacramento|Arizonia' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>

    <%= render :partial => 'layouts/navbar' %>
    <%= yield %>

  </body>
</html>

_navbar.html.erb：

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/homepage">Glamour Hit</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <%= link_to "Services", services_path %>
        </li>
        <li>
          <%= link_to "Packages & Prices", packages_and_prices_path %>
        </li>
        <li>
          <%= link_to "Gallery", preview_pictures_path %>
        </li>
        <li>
          <%= link_to "Contact", new_contact_path %>
        </li>
        <% if user_signed_in? %>
          <li>
            <%= link_to "Sign out", destroy_user_session_path, method: :delete %>
          </li>
        <% end %>
      </ul>
    </div>
  </div>
</nav>

index.html.erb(服务)：

<article id='services'>
  <h1>...</h1>
  <p id='p_services'>
    ...
  </p>
  <img src="<%= asset_path('_MG_0414.jpg') %>" />
</article>

还有谁知道为什么导航栏会这样显示？在浏览器上是从白色到透明的线性渐变。在这个页面上根本看不到它。

【问题讨论】：

你能展示一些css或小提琴吗？愿你的容器有一个固定的宽度，这会破坏你的布局。
我推到github上github.com/elenagarrone/glamour_hit所有页面都是这样的..
GitHub 真的不是很好，因为您无法查看网站的输出，只能查看文件的原始数据。我会做一个刺，问你是否确定你没有在你的 CSS 中使用任何精确的宽度（因为如果它们比它更宽，它们会超出视口）。返回您的媒体查询，并尝试使用百分比作为宽度。
抱歉，我不会安装完整的应用程序。你能提供一个工作的html示例或你的css吗？
@Lee 我看了一下，我一直使用百分比宽度。我也不明白为什么在 chrome 模拟器上看起来完全没问题..

标签： css media-queries viewport meta

【解决方案1】：

在某个地方，您的媒体查询一定有错字或类似问题。确保您的所有 CSS 都已整理或通过 CSS Lint 工具运行。

这可能会影响您遇到的任何数量的布局和媒体查询问题。

否则，请将代码发布到某个地方供我们查看。

【讨论】：

在他发布任何一段代码之前，很难说出这么笼统的事情。

【解决方案2】：

这是因为您的媒体查询。

尝试按照以下方式做一些事情：

@media all and (max-width:736px) {
    #services {
        margin-top:60px; // The height of your navigation bar
        width: 100%; // Full width of your mobile screen
        position: static; // Get rid of absolute positioning
        padding: 1em; // Add some spacing so the text isn't right up against the edge of the screen.
    }

在我的 iOS 模拟器上，这立即让它在手机上看起来好多了，虽然我没有碰过导航，但它会是一样的东西（主要是绝对定位，左侧：50%）

【讨论】：