索尼 Xperia Z1 移动设备上的背景图像被截断答案

【问题标题】：Background image cut off on Sony Xperia Z1 mobile device索尼 Xperia Z1 移动设备上的背景图像被截断
【发布时间】：2016-02-25 00:43:23
【问题描述】：

我正在构建一个需要整页背景图片的应用。我使用 Angular JS 和 CSS3 作为背景图片。

在页面加载时，<body back-img> 自定义指令 被命中并运行以下代码：

var grindModule = angular.module('grindApp', ['ngRoute'])
grindModule.directive('backImg', function(){
    return function(scope, element, attrs){
    var url = ['./../static/images/pushup.jpg', './../static/images/work.jpg']
    var idx = Math.floor(Math.random() * url.length)
    element.css({
        'background': 'url(' + url[idx] +') no-repeat center center fixed',
        'background-size' : 'cover'
    });
};

生成一个随机索引，然后用于从存储它们的数组中获取一个随机图像url。然后它将上述 url 放在下面的代码中background: url()。

页面加载后，页面如下所示：

请注意屏幕截图底部的黑色空白区域。我不想要这个。此背景适用于除此特定手机（我知道的）之外的所有设备。只有当我使用移动版的 Chrome 浏览器时才会产生这个错误。当我使用移动 Firefox 浏览器时不会发生这种情况。似乎是 Chrome 特定的，但我可能错了。

如果您觉得对您有帮助，这里是我的所有代码：Grind Github。

【问题讨论】：

标签： javascript html css angularjs sony-xperia

【解决方案1】：

我查看了您的网站。

这是我的思路：

1) 该手机上的浏览器可能已过时，并且无法正确支持“封面”属性。但是这个问题是你已经添加了“中心中心”作为背景位置，所以，在最坏的情况下，浏览器 - 应该 - 显示在页面中心对齐的图像，它的中心是全尺寸的，这不是。

2）图像甚至没有居中的事实让我认为“body”元素在高度设置为 100% 时无法正常运行。尝试将高度 100% 添加到您的 HTML 标记。

html,body {
    height: 100%;
}

3) 如果 #2 没有修复它，那么我会尝试在页面中添加另一个元素，就在起始 <body> 标记之后，如下所示：

<div class="bg-fullpage-wrapper"></div>

这个元素的样式应该是：

div.bg-fullpage-wrapper {
    /* Your current background stuff here ie:
    background: url("./../static/images/work.jpg") 50% 50% / cover no-repeat fixed;
    */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

为此尝试从 body 标记中删除 100% 的高度。当你这样做时，你必须修复元素的 z-index。

4) 如果这个 DIV 不能使它工作，那么我可能会开始考虑浏览器资源耗尽等问题，因为对于我来说似乎加载的图像对于 web 格式来说是巨大的，可能存在问题从/缩小到该分辨率。

【讨论】：

自己能够重现该问题，使 html 具有完整高度确实可以解决问题。不过，我建议最小高度 100%，我经历过只有高度 100% 的奇怪事情。哦，还有 OP，Aaron 的第三次修复通常被称为“Clearfix”。 stackoverflow.com/questions/8554043/what-is-clearfix
啊，谢谢凯文的澄清，我不知道它有一个术语:)。哈！每天学些新东西。干杯
即使是带有背景的“div”标签也不起作用？ :S

【解决方案2】：

这是一个 CSS 问题，而不是 JS 问题。但是，除此之外，我不知道幕后发生了什么。

head {min-height: 100%}

这就是我所知道的。

在带有 Chrome 的 Xperia Z2 上复制https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging

【讨论】：