How to Create a Responsive Mobile App

[jmolina2075]

Hi

We are developing a WebApp using profoundui and a Android WebViewer. I was wondering if is there a way to create a CSS in order to resize the screen
for the diferent devices.

Thanks in advance
Jose Molina.

[Scott Klement]

Unfortunately, no.. this can't be done with CSS like a traditional web page.

The reason is because of the visual designer. We have made this designer so that you don't need to understand the detai;ls of HTML, CSS, etc to build screens. You just drag & drop and it positions the elements to wherever you drag them. The result of this is that everything is positioned by absolute coordinates -- and these coordinates take precidence over the stylesheet. So you can't really add/remove/reposition based on the screen dimensions in the traditional CSS manner.

(If we did somehow allow this, the user wouldn't be able to position things with the mouse, they'd be positioned based on the web page flow, etc, and it really wouldn't be a WYSIWYG designer.)

So instead we recommend the use of our layouts to make things resize proportionately to the screen.

If you truly wish to have different layouts for different screen sizes, this could potentially be accomplished by JavaScript code. Maybe the easiest would be to have a "dummy" screen where the onload event queries the dimensions of the screen, puts them in hidden fields, and returns control back to the RPG prgoam. The RPG program could then choose to show a different format depending on what the dimensions are.

Or a more complex variant would be to have JavaScript that dynamically runs to reposition or hide/unhide elements based on the screen dimensions. That might be complex to maintain, but would be more similar to the "responsive design" you're looking for.

Anyway... hope that makes sense. Good luck with your project.