html - Windows 8 WinJS 应用程序 CSS 未按预期运行

Question

我有一个用 Windows 8 (WinJS) 编写的游戏。我的目标是让游戏以横向或填充模式显示，但对于其他方向，只需在屏幕中央显示应用程序 Logo 。这是我到目前为止所拥有的:

    <canvas id="mainCanvas">
    </canvas>
    <img id="imageLogo" src="/images/logo.png" />            
    <div id="adControl" style="width: 728px; height: 90px; visibility:visible; margin-bottom: 0px; z-index: 1"        
        data-win-control="MicrosoftNSJS.Advertising.AdControl"
        data-win-options="{applicationId: 'app-id', adUnitId: 'add-unit-id', isAutoRefreshEnabled: 'true'}">
    </div>

样式如下:

@media screen and (-ms-view-state: fullscreen-landscape) {
#imageLogo {
    visibility:collapse;
    display:none;
}
#adControl {
    visibility:visible;
    display:normal;
}
#mainCanvas {
    visibility:visible;
}
}

@media screen and (-ms-view-state: snapped) {
#adControl {
    visibility:collapse;
    display:none;
}
#mainCanvas {
    visibility:collapse;
    display:none;
}
#imageLogo {
    clear:both;
    float:none;        
    visibility:visible;
    display:normal;
    margin: 0px 0px;        
}

我只包括全屏风景和快照，因为其他的都是一样的。这是我认为与尺寸相关的唯一游戏代码:

var setupCanvas = function (changed) {
    if (Windows.UI.ViewManagement.ApplicationView.value === Windows.UI.ViewManagement.ApplicationViewState.fullScreenLandscape
        || Windows.UI.ViewManagement.ApplicationView.value === Windows.UI.ViewManagement.ApplicationViewState.filled) {
        canvas.width = window.outerWidth;
        canvas.height = window.outerHeight - 90;
    } else {
        clearInterval(gameLoopId);
    }
}

基本上它只是调整 Canvas 大小，对于其他模式会暂停游戏循环。

它实际做的是横向显示 Logo ，从而取代广告控件，在其他模式下，它显示所有三个元素，但大小不正确。

CSS 有什么问题？ (我确实尝试过使用 ms-grid，但根本无法让它工作)

Answer 1

我遇到了与 pm_2 相同的问题。将 display 设置为 none 是可行的，但这仅适用于快照 View 。此外，当使用混合表达式时，使用所见即所得界面所做的更改会在错误的 CSS 代码位置更新。当我为 Snapped View 调整大小时，主要的 CSS 代码已更新。不好..

我的 CSS 代码

.homepage section[role=main] {
    margin-left: 120px;
    margin-right: 26px;
}
@media screen and (-ms-view-state: snapped) {
.homepage section[role=main] {
    margin-left: 20px;
    margin-right: 20px;
}

.homepage .deadline {
    display:none;
}

.homepage .todos{
   position: fixed;
       height: 225px;
       right: 421px;
       left: 45px;
       top: 135px;
}

  .homepage .chart {
  display: none;
  }
}


@media screen and (-ms-view-state: portrait) {
    .homepage section[role=main] {
    margin-left: 100px;
    }
}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .homepage section[role=main] {
        margin-left: 100px;
        margin-right: 100px;
     }
}

.homepage body {
    color: white;
}

 .homepage .chart {
    background-color: #36073c;
    position: absolute;
    height: 495px;
    right: 766px;
    left: 125px;
    top: 150px;
}

.homepage .deadline {
    background-color: #36073c;
    /*border: 4px solid black;*/
    position: absolute;
    height: 495px;
    right: 421px;
    left: 640px;
    top: 150px;
 }

.homepage .deadline:hover {
    border: 3px solid yellow;
}

.homepage .todos {
    background-color: #36073c;
    /*border: 4px solid black;*/
    position: absolute;
    height: 495px;
    right: 86px;
    left: 975px;
    top: 150px;
}

 .homepage .todos:hover {
    border: 3px solid yellow;
 }

 .homepage .box-title {
     height: 8%;
     font-size: 22px;
     font-weight: bolder;
     padding: 5px 10px;
     color: #fff;
 }

 .homepage .box-content {
     height: 87.96%;
 }

.homepage .tabular-data {
    margin: 20px 40px;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.homepage .tabular-data tr td {
    padding: 5px;
}