Question

我在一个月前推出了一个非常简单的启动页面。我设计的网站试图确保移动用户能够正确地看到网站。我使用Chrome Dev工具和其他一些在线工具来确保网站在移动设备上正确显示。

然而，前几天，我的一些Android好友向我发送了我网站的截图。背景并没有按照预期填写。这只发生在Android上，对于我的生活，我无法弄清楚原因。在我的所有工具中，它看起来很好，这使得很难排除故障。当我在ChromeDev工具中预览为Android手机（如Galaxy S4）时，背景显示正确。有什么想法吗？

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Raleway:400,800,900);
html {
  background: url('./freedom.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body {
  font-family: 'Raleway', sans-serif;
  background: rgba(247, 247, 247, 1);
}
container {
  position: absolute;
  height: 100%;
  width: 100%;
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='./freedom.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./freedom.jpg', sizingMethod='scale')";
}
headline {
  font-size: 400%;
  margin-top: 10%;
  font-weight: bolder;
  color: #0A83FF;
  position: relative;
  display: block;
  text-align: center;
  letter-spacing: -7px;
}
description {
  padding-left: 2%;
  position: relative;
  display: block;
  text-align: center;
  padding-top: 0.5%;
}
icons {
  font-size: 225%;
}
a {
  color: #000000;
}
a:visited {
  text-decoration: none;
}
a:hover {
  color: #0A83FF;
}
red:hover {
  color: #FF0000;
}
green:hover {
  color: #00BC00;
}
yellow:hover {
  color: #E5E500;
}
@media only screen and (max-width: 574px) {
  headline {
    font-size: 200%;
    font-weight: 600;
    color: #0A83FF;
    position: relative;
    display: block;
    text-align: center;
    letter-spacing: -3px;
  }
}

＆＃13;

<link href="http://normalize-css.googlecode.com/svn/trunk/normalize.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
  <title>blah.com</title>
  <head>
    <link rel="stylesheet" href="css/master.css" media="screen" charset="utf-8">
    <link rel="icon" type="image/png" href="favicon.gif">
  </head>
  <body>
    <container>
      <headline>Blah</headline>
      <description>
        <red>Hi</red>,
        <green>There</green>,
        <yellow>Friends</yellow>.
        <icons>
          <p>
            <a href="http://www.github.com/blah" target="new"><i class="fa fa-github-square"></i></a>
            <a href="http://www.twitter.com/blah" target="new"><i class="fa fa-twitter-square"></i></a>
            <a href="https://www.linkedin.com/profile/view?id=308920572" target="new"><i class="fa fa-linkedin-square"></i></a>
          </p>
        </icons>
      </description>
    </container>
  </body>

</html>

＆＃13;

背景是宽度缩放，但不调整高度。为什么这会在Android上发生？我非常感谢任何帮助。

Answer 1

只需将min-height: 100%;添加到html选择器中即可。它一定会奏效！

html {
  background: url('./texas.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
}

网站背景在Android上显示不正确。 Chrome DevTools没有反映这一点

1 个答案: