屏幕尺寸Roundcube条件

问题描述 投票：0回答：1

我问这个，因为我一直没能在别处找到了答案。

我使用Roundcube构建Web邮件应用程序。 Roundcube具有可用于显示的东西，用普通的HTML一起定制XHTML标签。这些XHTML标签可以具有属性“condition”，如果我正确理解，如果条件fullfilled将只显示元件。例子：

<roundcube:if condition="var &lt; 0" />
    <div> ... </div>
<roundcube:elseif condition="var &gt; 0" />
    <span> ... </span>
<roundcube:else />
    <p> ... </p>
<roundcube:endif />

<roundcube:container name="container-desktop" id="container-desktop" condition="!myCondition" />
<roundcube:container name="container-mobile" id="container-mobile" condition="myCondition" />

我的问题是，我想改变屏幕/宽视情况dewpending。基本上依赖于用户是否usnig移动，平板电脑或桌面。我想要做的是显示一个div如果用户在移动或平板电脑，而不是在桌面上，或周围的其他方式。

我一直没能找到这个以任何方式。有没有人谁知道这是可以实现的居屋？

responsive-design xhtml condition viewport roundcube
1个回答
0
投票

我不是一个人转到了Roundcube，所以也许别人可以帮你找到一个Roundcube @media条件标记。

虽然作为一种替代，你认为与关闭的，现成的HTML和CSS解决这个？

HTML

<div class="container-desktop">
    <!-- desktop content -->
</div>

<div class="container-mobile">
    <!-- mobile content -->
</div>

CSS

<head>
    <meta charset="utf-8">
    <title>...</title>
    <style type="text/css">
        /* mobile first ==> by default show mobile view */
        .container-desktop{display: none;}

        /* show desktop view for viewports above 480px, adjust as required */
        @media only screen and (min-width: 481px){
           .container-desktop{display: block;}
           .container-mobile{display: none;}
        }
    </style>
</head>

希望这可以帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.