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

Question

我正在构建一个需要整页背景图片的应用程序。我正在使用 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().

中

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

注意屏幕截图底部的黑白色 space。我不想要这个。此背景适用于除此特定 phone（据我所知）之外的所有设备。仅当我使用 Chrome 浏览器的移动版本时才会出现此错误。当我使用移动 Firefox 浏览器时，不会发生这种情况。似乎是 Chrome 具体的，但我可能错得很离谱。

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

Answer 1

我看过你的网站。

这是我的思路：

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

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

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

4) 如果这个 DIV 不起作用，那么我可能会开始考虑浏览器资源运行 out 等，因为似乎为我加载的图像是对于 Web 格式来说非常庞大，缩小 from/to 该分辨率可能会出现问题。

Answer 2

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

head {min-height: 100%}

这就是我所知道的。

在 Xperia Z2 上转载 Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging

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

Background image cut off on Sony Xperia Z1 mobile device

html

javascript

css

angularjs

sony-xperia