移动iOS - 固定背景图像解决方案

Question

我知道类似的问题之前已经被问过几次，但我已经浏览了很多问题/答案，并找不到适用于我的特定问题的解决方案。

基本上我有一个响应式网站，它有固定的背景图像 - 图像是1280 x 853 px，它们通过以下css应用于html标签（由于尝试了几种解决方案，它目前有点混乱） -

html { 
    background: url(/content/images/bg_lrg.jpg) no-repeat top center fixed; 
    -webkit-background-size: 1024px 768px; 
    background-attachment: fixed; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

我的想法是应用背景大小 - 如果这个工作，我会使用媒体查询来应用相关大小的iPad/iPhone /其他。

该图像目前在iOS设备上看起来很大 - 因为它将自身限制在文档的高度而不是视口 - 我知道在移动设备上有很多固定背景问题 - 是否有人有解决方法？在哪里我的图像可能会支持视口宽度而不是文档高度？

Answer 1

第一个解决方案，您是否尝试过设置您的ViewPort？在你的HTML的头，你可以包括这样的：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

我先试试。你甚至可以指定iPhone的宽度。首先，这是最好的解决方案，以便让您的设备在手机上正确显示图像的大小。这里有一个链接，可以快速描述你可以用ViewPorts做什么：

许多网站将它们的视口设置为“width = 320，initial-scale = 1”以精确地适应纵向模式下的iPhone显示。 Using the viewport meta tag to control layout on mobile browsers

---

次要解决方案：

如果不工作，我创建了一个修改了这个定制的解决方案之前，这些新的功能出来。我修改这个功能，使网站的背景总是填充背景，无论屏幕尺寸：

的JavaScript使用JQuery：

//Resize background image function 
$(function() { 
    var $window = $(window); 
    var width = $window.width(); 
    var height = $window.height(); 

setInterval(function() { 
    //Checks for screen resize every hundreth of a second and resizes elements based on that new screen size 
    if ((width != $window.width()) || (height != $window.height())) { 
     //resets the variables to prevent glitching 
     width = $window.width(); 
     height = $window.height(); 

     //calls resizing functions 
     resizeBg(); 
    } 
}, 100); 
}); 

它调用此函数：

function resizeBg() { 
var theWindow = $(window), 
$bg = $("#bgVideo"), 
aspectRatio = 1920/1080; //-- This is the aspect ratio (width/height) of the background image. if the video changes size. 

//actually apply aspect ratio 
if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
    $bg.removeClass().addClass('bgheight'); 
} else { 
    $bg.removeClass().addClass('bgwidth'); 
} 
} 

在我CSS我有以下类：

.bgwidth { 
    width: 100%; 
} 

.bgheight { 
    height: 100%; 
} 

而你的HTML，你想有这样的事情：

<video id="bgVideo"..... 

OR

<img id="bgVideo"... 

，我有我的背景ID下面的CSS：

#bgVideo { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

我希望这有助于。