Question

我想使用PrimeFaces responsive，但是当我在电脑上运行应用程序时，一切正常，如果我调整浏览器大小，应用程序按预期工作，但如果我用手机打开应用程序，响应是不工作。

我正在使用PrimeFaces 5.3.RC1，Mojarra 2.2.0和Glassfish 4.0

代码：

<h:form>
    <p:dataTable var="car" >
        <p:column headerText="Id">
            <h:outputText value="ColId" />
        </p:column>

        <p:column headerText="Year (p3)" priority="3">
            <h:outputText value="Year" />
        </p:column>

        <p:column headerText="Brand (p2)" priority="2">
            <h:outputText value="brand " />
        </p:column>

        <p:column headerText="Color (p4)" priority="4">
            <h:outputText value="color" />
        </p:column>
    </p:dataTable>
</h:form>

left phone, rigth pc

Answer 1

您可能希望使用新的重排模式 introduced in PrimeFaces 5.2社区版。

回流模式是移动设备上的最佳方法，因为它显示堆叠列

<p:dataTable var="car" reflow="true">

您可以查看the second example in the PrimeFaces' showcase。

Answer 2

PrimeFaces认为屏幕比实际大。告诉iOS不要模拟更大的屏幕：

<meta name="viewport" content="width=device-width"/>

您现在应该获得数据表的堆叠版本。

<html xmlns...>
<h:head>
    <meta name="viewport" content="width=device-width"/>
</h:head>
<h:body>
    <p:dataTable ... reflow="true">
        (...)
    </p:dataTable>
</h:body>
</html>

Answer 3

对于最后一条评论，这可以帮助您，如果还没有，请添加

＆＃13;

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

＆＃13;

你的和primeFaces响应将正常工作

PrimeFaces响应不起作用

3 个答案: