2014-04-09 5 views
0

비슷한 문제가 게시되었지만 그 답이 나에게 도움이되지 못했습니다.HTML5 동영상이 미디어 검색어에 숨겨져 있지 않음

나는 전체 배경이 mp4 형식의 비디오 인 반응 형 웹 사이트를 운영하고 있습니다. 데스크톱 브라우저에서는 아무런 문제가 없습니다. 그 코드는

 @media screen and (min-width: 400px) 
{ 

    video { 
    position: fixed; right: 0; bottom: 0; 
    min-width: 100%; min-height: 100%; 
    width: auto; height: auto; z-index: -100; 
    background-size: cover; 
    } 

} 

이하 그리고 작은 화면에 대한 미디어 쿼리는 내가 비디오가 숨겨지지 아이폰 OS 크롬과 사파리에서 볼 때 아래의 문제가

@media only screen and (max-width : 400px) { 
background: url(../images/tanisalimmobilebackground.jpg); 
    background-size:cover; 

    video { 
     display:none!important; 
    } 

} 

하고에 보이지 않는 컨트롤이있는 배경.

너비가 최대 400 픽셀 인 경우 위에 언급 한 jpg를 보여주고 싶습니다.

+0

기기의 너비를 확인 했습니까? 어쩌면 400px 이상입니까? – Gil

+0

[viewport meta tag] (https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag)를 사용 했습니까? –

답변

1

배경이 있어야하는 요소를 지정해야한다고 생각합니다. 예 :

@media only screen and (max-width : 400px) { 
    someelement{ 
     background: url(../images/tanisalimmobilebackground.jpg); 
     background-size:cover; 
    } 
    video { 
     display:none!important; 
    } 

} 
관련 문제