Home/ Questions/Q 6603333
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:59:43+00:00

We have a web application written with JSF and are trying to add a

  • 0

We have a web application written with JSF and are trying to add a mobile version to it. Ideally, we’d have a separate folder with templates, CRUD and resources (e.g. jQuery Mobile) and our landing page would be able to choose the appropriate template based on the user-agent attribute of the header.

One way would be to use a scriptlet and redirect to mobile/index.xhtml – end of story, but people don’t like scriptlets 😀

Another way would be to wrap the content of the landing page (includind the templated parts) in a panelGroup with rendered=”#{mobileDetector.isMobile()}”, having a backing bean perform what the scriptlet would have done otherwise. But I think it kind of cripples the templates, plus it doesn’t apply to the head section.

So – is there a better way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Either use a separate subdomain, e.g. mobile.example.com for mobile users and (www.)example.com for desktop users, and/or sniff the user agent. There are public APIs available on:

    Alternatively, you can use CSS to hide/change parts of the the HTML markup based on the media type. 

    <link rel="stylesheet" href="css/desktop.css" media="screen,projection">
<link rel="stylesheet" href="css/mobile.css" media="handheld">
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/iphone.css" media="all and (max-device-width: 480px)">
<link rel="stylesheet" href="css/ipad-portrait.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="stylesheet" href="css/ipad-landscape.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    • 0