HTML5横竖屏提示

HTML代码：

<div class="screen-prompt"></div>

CSS判断代码：

/*横竖屏提示*/
@media screen and (orientation:landscape) {
    .screen-prompt{ display: block;}
}

@media all and (orientation : portrait){
    .screen-prompt{ display: none;}
}

.screen-prompt {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    background: #32373B url(screen_switch.gif) center center no-repeat;
    background-size: contain;
}