Question

我目前正在网站上工作，而且我注意到我的媒体查询在Chrome模拟器上工作得非常好，但在我的手机上却没有。基本上在我的手机上，所有内容似乎都被推到右侧，即使我横向滚动，我也看不到所有内容。什么可能导致这个问题？

enter image description here

视口：

<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>

也有人知道导航栏出现的原因吗？在浏览器上是从白色到透明的线性渐变。在这个页面中根本不应该看到它。

Answer 1

这是因为您的媒体查询。

尝试沿着这些方向做一些事情：

@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％）

Answer 2

在某处，您必须在媒体查询中出现拼写错误或类似问题。确保所有CSS都已整理或通过CSS Lint工具运行。

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

否则，请将代码发布到某处以供我们查看。

媒体查询在移动设备上无法正常运行

2 个答案: