Javascript 旋转时如何设置元素的固定属性（使用CSS）

我正在开发一个使用HTML5的WP8应用程序。 我的CSS代码

@media all and (orientation:portrait) {
@-ms-viewport {
    width:320px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
}
#sample{ display:none}
@media all and (orientation:landscape) {
@-ms-viewport {
    width:480px;
    user-zoom: fixed;
    max-zoom: 1;
    min-zoom: 1;
}
#sample{ display:block}

在我的Javascript文件中

if($('#sample').css('display') == 'none') {
    $("#sample").fadeIn("slow");
}else{
    $("#sample").fadeOut("slow");

    }

在我的HTML文件中有一个按钮。单击此按钮时，#示例显示/隐藏。但当我隐藏它时，我将设备旋转到lanscape，它就会消失。 我希望#样本始终以lanscape模式显示。有人能帮我吗？谢谢大家

问题已修复：使用方向更改事件

 $(window).on("orientationchange", function (event) {
            if (event.orientation == "landscape") {
                $("#sample").fadeIn("slow");
            } else {
                $("#sample").hide();
            }
        });

---

您的脚本可以很简单，如

$（“#sample”）。fadeToggle（'slow'）

当我隐藏它时，我将设备旋转到lanscape，它会消除这一混乱，您已经隐藏了它，当然它会消失，要再次显示它，请单击您的按钮。除非你是想把它当作另一件事。谢谢，但是你知道如何在旋转到lanscape时保持它的显示吗？我不确定方向改变时触发的事件，但是你可以尝试在@media rule for

方向：横向

中为

方向：横向

添加一些样式

显示：块

。我在横向模式下添加了显示样式。但它仍然不起作用