I have created a xpage to show the domino view, and I have set the "Maximum rows per page:20", but when I review the xpage from my Iphone, I found that the view only half of the creen. So I have set the "Maximum rows per page:30", but when I review the xpage from Ipad, the view only half of the screen again.

So How to make the xpage can be adjusted automatically according to the size of the screen automatically displays rows??

Following is the xpage coding:

<?xml version="1.0" encoding="UTF-8"?><xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
    <xp:dominoView var="view1" viewName="webvwbyDept" />
</xp:this.data>
<xp:viewPanel value="#{view1}" id="viewPanel1" var="rowData"
    viewStyle="width:99.0%" rows="38">
    <xp:this.facets>
        <xp:pager partialRefresh="true" layout="Previous Group Next"
            xp:key="headerPager" id="pager1">
        </xp:pager>

        <xp:pager partialRefresh="true" layout="Previous Group Next"
            xp:key="footerPager" id="pager2">
        </xp:pager>
    </xp:this.facets>


    <xp:viewColumn columnName="$4" id="viewColumn1"
        style="text-align:center;width:65.0px">
        <xp:this.facets>
            <xp:viewColumnHeader value="Location" xp:key="header"
                id="viewColumnHeader1" style="width:65.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="Dept" id="viewColumn2"
        style="text-align:center;width:88.0px">
        <xp:this.facets>
            <xp:viewColumnHeader value="Department" xp:key="header"
                id="viewColumnHeader2" style="width:88.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="signNO" id="viewColumn3"
        style="text-align:center;width:30.0px" displayAs="link"
        openDocAsReadonly="true">
        <xp:this.facets>
            <xp:viewColumnHeader value="Document No" xp:key="header"
                id="viewColumnHeader3" style="width:30.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>

        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete" id="eventHandler1">
            <xp:this.action><![CDATA[#{javascript:if (!rowData.isCategory())
                var url = "0/"+rowData.getUniversalID()+"?OpenDocument"
                facesContext.getExternalContext().redirect(url);}]]>
            </xp:this.action>
        </xp:eventHandler>
    </xp:viewColumn>
    <xp:viewColumn columnName="BDT" id="viewColumn4"
        style="width:65.0px;text-align:center">
        <xp:this.facets>
            <xp:viewColumnHeader value="Begin Date" xp:key="header"
                id="viewColumnHeader4" style="width:65.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="EDT" id="viewColumn5"
        style="width:65.0px;text-align:center">
        <xp:this.facets>
            <xp:viewColumnHeader value="End Date" xp:key="header"
                id="viewColumnHeader5" style="width:65.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="$3" id="viewColumn7"
        style="text-align:center;width:30.0px">
        <xp:this.facets>
            <xp:viewColumnHeader value="Reason" xp:key="header"
                id="viewColumnHeader7" style="text-align:center;width:30.0px">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="F1" id="viewColumn9">
        <xp:this.facets>
            <xp:viewColumnHeader value="Project" xp:key="header"
                id="viewColumnHeader9" style="text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
        <xp:this.value><![CDATA[#{javascript:var maxLength=10;var columnValue=rowData.getColumnValue("F1");if (typeof columnValue == "java.util.Vector") { 
    columnValue = columnValue.toArray().join(",");
}return columnValue.length > maxLength?columnValue.substring(0,maxLength)+"...":columnValue;}]]></xp:this.value>
    </xp:viewColumn>
</xp:viewPanel>