如何在小型设备上隐藏布局项及其所有内容

Question

我在屏幕上有两个布局项，名为（1）“AccountsMaster”和（2）“AccountDetails”。 AccountsDetails包含许多内容项，包括表。 我试图在较小的屏幕上隐藏帐户详细信息，以便只显示AccountsMaster并使用所有有限的屏幕空间。

我在user-customization.css

中尝试了以下操作

screen and (max-width: 400px) and (orientation: portrait), 
screen and (max-width: 640px) and (max-height: 400px) and (orientation: landscape) { 
    .prols-phone-hidden{
        display : none;
    }
}

然后在我的屏幕js代码背后：

myapp.AccountsScreen.AccountDetails_postRender = function (element, contentItem) {
    // Write code here.
    $(element).addClass("prols-phone-hidden");
};

但那没有效果。

我还尝试了css中的“visibility：collapse”，以及确实隐藏了布局及其所有子节点，但它最初占用的屏幕空间仍然保留（并且空白），所以主布局不会使用整个屏幕，并将被挤压一半。

如何隐藏细节，以便主布局可以拥有所有屏幕？

此致

Answer 1

在Lightswitch HTML中，我会在屏幕创建的事件中执行以下操作：

myapp.SCREENNAME.created = function (screen) {

    //GET THE HEIGHT AND WIDTH OF THE SCREEN
    var height = window.screen.availHeight;
    var width = window.screen.availWidth;

    if (height < 400 || width < 640) { //HIDE THE CONTENTS
        screen.findContentItem("AccountsMaster").isVisible = false;
        screen.findContentItem("AccountDetails").isVisible = false;
    }
    else {
        //DO NOTHING
    }
};

顶部的这2个变量将获取您的屏幕高度和宽度，然后在下面您可以根据该值确定您要执行的操作。使用screen.findContentItem("")，您可以隐藏您不想显示的信息，因为它无法正确显示。