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

我希望這有助於。