100% высоты CSS для IOS IPad

Question

(я читал на тему IOS мобильного сафари и как он отображает некоторые позиционирования и стили CSS по-разному.)

Я все еще пытаюсь решить эту проблему, которая оказывает фонового контента, чтобы охватить всю высоту дисплея на iPad, я надеялся добиться того же стиля, что и у меня на рабочем столе, и когда я уменьшаю браузер до вида планшета. Вместо этого контент просто имеет ширину 100%.

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

Любые комментарии или советы будут высоко оценены.

мета данные:

<meta charset="UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" /> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 

HTML:

<div class="top-section"> 
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="videos/screentest1.webmhd.webm" type="video/webm"> 
<source src="videos/screentest1.mp4" type="video/mp4"> Video not supported 
</video> 
<div id="video_pattern"> 
      </video> 
    </DIV> 
    </div> 

CSS:

#video_background { 
display: none; 
position: absolute; 
bottom: 0px; 
right: 0px; 
min-width: 100%; 
min-height: 100%; 
z-index: -1000; 
overflow: hidden; } 

#video_pattern { background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Safari */ 
background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* Standard syntax */; 
position: absolute; left: 0px; top: 0px; width: 100%; min-height: 100%; z-index: 1; } 

.top-section{ 
background-size: cover; 
background-repeat: repeat; 
position: relative; 
top: 0; 
left: 0; 
min-width: 100%; 
min-height: 100%; 
z-index: 2; 
text-align: center; 
    padding: 0;} 

Answer 1

Если бы мы могли видеть это жить было бы полезно, но вы, возможно, потребуется применить стили к ваши body и html теги. Как это скрипка:

http://jsfiddle.net/Davidicus/2eaaP/

попробуйте добавить

html, body { 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

Im уверены, что IOS заставит все видео играть в плеере по умолчанию, так что не исправить вас там еще.

Answer 2

Я думаю, что это ошибка, я не могу получить 100% высоту по CSS.

window.innerHeight - это самый надежный способ получить реальную высоту видового экрана.

Вот мой взлом для сброса высоты видового экрана.

Это в закрытии и без зависимости.

(function(){ 
    var setViewportHeight = (function(){ 
    function debounced(){ 
     document.documentElement.style.height = window.innerHeight + "px"; 
     if (document.body.scrollTop !== 0) { 
      window.scrollTo(0, 0); 
     } 
    } 
    var cancelable = null; 

    return function(){ 
     cancelable && clearTimeout(cancelable); 
     cancelable = setTimeout(debounced, 100); 
    }; 
    })(); 

    // ipad safari 
    if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){ 
    window.addEventListener("resize", setViewportHeight, false); 
    window.addEventListener("scroll", setViewportHeight, false); 
    window.addEventListener("orientationchange", setViewportHeight, false); 
    setViewportHeight(); 
    } 
})();