我目前正在一个网站上工作，我注意到我的媒体查询在 chrome 模拟器上运行良好，但在我的手机上却不行。 基本上在我的手机上，所有内容似乎都被推到了右侧，即使我水平滚动也看不到所有内容。 什么会导致这个问题？
视口(viewport):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
我在这个例子中使用了媒体查询:
@media screen and (min-width: 840px) and (max-width : 1280px){...}
应用程序.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);
}
}
服务.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>
还有谁知道为什么导航栏会这样出来？在浏览器上是从白色到透明的线性渐变。根本不应在此页面中看到它。
最佳答案
这是因为你的媒体查询。
尝试按照这些思路做一些事情:
@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%)
关于css - 媒体查询在移动设备上无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29305568/