브라우저가 자동으로 이미지를 변경하지 않습니다.

Question

세로 및 가로로 두 개의 배경 이미지를 만들었습니다. 클라이언트가 화면을 회전 할 때 자동으로 브라우저 변경 배경 이미지를 원합니다. 불행히도, 내가 원하는대로 작동하지 않았다 ...

<script> 
    var stage = document.getElementById('stage'); 

    var width = screen.width; 
    var height = screen.height; 

    stage.style.width = width + 'px'; 
    stage.style.height = height + 'px'; 

    if (width < height) { 
     // portrait 
     stage.style.background = 'url(portrait.png) no-repeat'; 
    } else { 
     // landscape 
     stage.style.background = 'url(landscape.png) no-repeat'; 
    } 

    var supportsOrientationChange = "onorientationchange" in window, 
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 

    window.addEventListener(orientationEvent, function() { 

     if (screen.width < screen.height) { 
      // portrait 
      stage.style.background = 'src(portrait.png) no-repeat'; 
      alert('Portrait'); 
     } else { 
      // landscape 
      stage.style.background = 'src(landscape.png) no-repeat'; 
      alert('Landscape'); 
     } 

    }, false); 

</script> 

당신이 그것을 개선하는 데 도움이 될 수 있습니까?

Answer 1

오리엔테이션 관련 스타일에 대해 CSS3 미디어 쿼리를 사용할 수 있습니다.

/* Portrait */ 
@media screen and (orientation:portrait) { 
    /* Portrait styles */ 
} 
/* Landscape */ 
@media screen and (orientation:landscape) { 
    /* Landscape styles */ 
}