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

Posted

技术标签:

【中文标题】网站背景在 Android 上显示不正确。 Chrome DevTools 没有反映这一点【英文标题】:Website background displaying incorrectly on Android. Chrome DevTools not reflecting this 【发布时间】:2015-12-20 06:53:45 【问题描述】:

大约一个月前,我推出了一个非常简单的启动页面。我设计这个网站是为了确保移动用户能正确地看到这个网站。我使用 Chrome 开发工具和其他一些在线工具来确保网站在移动设备上正确显示。

然而,前几天,我的几个安卓朋友给我发了一张我网站的截图。背景没有像预期的那样填充。这只发生在android上,对于我的生活,我无法弄清楚为什么。在我所有的工具中,它看起来都很好,这使得故障排除非常困难。当我在 ChromeDev 工具中预览 Android 手机(如 Galaxy S4)时,背景显示正确。有什么想法吗?

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

这就像背景在宽度上缩放,但没有调整高度。为什么这只会发生在Android上?我将不胜感激。

【问题讨论】:

你在安卓上使用的是哪个浏览器?铬? 这听起来很像***.com/questions/22295082/… @LearningCODE - 是的,他们在 Android 上使用 Chrome 尝试使用max-widthmax-height 如果上述方法不起作用,请尝试在sizingMethod 中使用crop 而不是scale.. 【参考方案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 没有反映这一点的主要内容,如果未能解决你的问题,请参考以下文章

图片在 Chrome 中显示,但在 Firefox 中不显示

在 Android Opera Mini 浏览器上无法正确查看网站

在 iOS 上显示背景,但在 Android Xamarin 上不显示

网站无法在 iOS 上正确显示,是不是增加了我的视口单位?

Android 9应用程序菜单是深色背景上的暗文本

C# 桌面背景可能显示不正确的位置?