Мобильный iOS - Исправлено решение для фонового изображения

Question

Я знаю, что подобные проблемы были заданы несколько раз раньше, но я прошел через многие вопросы/ответы и не могу найти решение, которое работает для моей конкретной проблемы.

В основном у меня есть отзывчивый веб-сайт с фиксированными фоновыми изображениями - изображения 1280 x 853 px, они применяются к тегу html через следующий css (который в настоящее время немного беспорядок из-за попытки нескольких решений) -

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 - поскольку оно ограничивает себя высотой документа, а не видовым окном - я знаю, что есть много проблем с фиксированным фоном в мобильном Ios - есть ли у кого-нибудь решение обходного решения? где мое изображение может содержать ширину окна просмотра, а не высоту документа?

Answer 1

Первое решение, Вы пробовали установить ViewPort? В голове вашего HTML, вы можете включить это:

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

Я бы первый попробовать. Вы даже можете указать ширину для iPhone. Сначала это лучшее решение, чтобы ваше устройство правильно отображало размер изображения на вашем телефоне. Вот ссылка с быстрым описанием того, что вы можете сделать с ViewPorts:

Многих сайтов установить их видовые «ширину = 320, начальный масштаб = 1», чтобы соответствовать точно на дисплей iPhone в портретном режиме. Using the viewport meta tag to control layout on mobile browsers

---

Secondary Решение:

Если это не работает, я создал модифицированную это собственное решение, прежде чем они новая функция вышла. Я изменил эту функцию, чтобы сделать фон веб-сайта всегда заполнения фона независимо от размера экрана:

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"..... 

ИЛИ

<img id="bgVideo"... 

и у меня есть следующие CSS для моего фона ID:

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

Я надеюсь, что это помогает.