A mobile page consists of 3 sections, header, content and footer. Either PrimeFaces mobile components or native jQuery Mobile approach can be used to define a page. Please note lazy loading feature is only supported by component approach.

Source

singlePage.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">
    
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>

    </h:head>
    
    <h:body>
        
        <pm:page>
            <pm:header title="Title"></pm:header>
            
            <pm:content>
                //...
            </pm:content>

            <pm:footer title="Footer"></pm:footer>
        </pm:page>
    </h:body>
    
</html>

singlePage.xhtml (Alternative)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    xmlns:pm="http://primefaces.org/mobile">
    
    <f:view renderKitId="PRIMEFACES_MOBILE" />
    
    <h:head>

    </h:head>
    
    <h:body>
        
        <div data-role="page">
            <div data-role="header">...</div>
            <div role="main" class="ui-content">
                ...
            </div>
            <div data-role="footer">...</div>
        </div>

    </h:body>
    
</html>

Single Page

Source

Footer