Android, Phonegap, HTML5 and CSS3

[kaimotta]

Hi all

I am currently making an app for Android using Phonegap as the wrapper, so essentially the App will be a web app I imagine.

I’m interested to know if anyone else has done this or something similar.

My first idea was to create a series of media queries to effect the different screens sizes: 240px by 320px, 320px by 480px, 480px by 800px, 540px x 1280px, 720px by 1280px, 1280 by 720px.

But then I started to read about screen density, as this is inherent to Android.

The main bug bear I have is that the client doesnt want the screen to scroll at all, it must always remain fixed with scrolling inside in a div with a scroll bar for instance.

So the more I read the more confused I am becoming, and the more I learn that almost every developer has a nightmare with building apps for android.

Should I target each size specifically through media queries using percentages for widths and heights, or can I do something with the screen densities and make the app grow to fill each screen using css webkit queries to perform this?

A problem related to the fact that the app cant scroll (thankfully it need be only in portrait) is that when I created for one phone wih the same width but different height to another I obviously irregularities with the presentation, but because it’s sits in the same section of the media query css sheet I cant manipulate it…

Any help, ideas, thoughts much appreciated…

Kai

[Paulie_D]

Quite simply, your client is being unreasonable. Charge accordingly.

[kaimotta]

Money isn’t the issue here at all, I’m just wondering if it’s actually possible

[Paulie_D]

So you want a fixed header and fixed footer with a ‘content div in between BUT at the same time it has to fit all screens regardless of size.

I suppose it COULD be done but I’m not sure of mobile support for fixed positioning and the media queries would be helacious.

[kaimotta]

I’ve built the whole page in percentages and then targeting using media queries, and it works pretty well until I get two different phones with same widths and different heights.

The pages don’t have a footer either.

Do every work with screen densities?

[Paulie_D]

Wait…I’m confused.

> The main bug bear I have is that the client doesn’t want the screen to scroll at all, it must always remain fixed with scrolling inside in a div with a scroll bar for instance.

He doesn’t want the screen to scroll BUT he wants the content to scroll and there is no footer?

Doesn’t this mean just a fixed header?

[kaimotta]

Unfortunately not. The main page cant scroll, but inside the page under the header on different pages there are different elements, most pages are different underneath the header, but on some there is a scrollbox with a selection of different buttons to click on leading to other parts of the app.

If you could see it you would understand it better I imagine.

[Paulie_D]

>If you could see it you would understand it better I imagine.

Then we need to see mock-ups of various pages & states I would suggest.

However, from your description it just sounds like a fixed header, what is underneath CAN scroll UNLESS it’s the main (front/index) page.

[kaimotta]

How do I show something on here? I cant upload an image anywhere

[Paulie_D]

Put the images on a webserver , I use photobucket, and then you can use html to add them like this.

See…

[kaimotta]

Okay this is the homepage

I have remove some elements as it’s meant to be private.

Now if you look at this page. I have made this quite successfully but all five of those elements must always fill the height. Which I have done, inside those buttons are icons and text normally, so when you start hitting different screens the problems happen particularly when the width is the same but the height is different

[Paulie_D]

For a front screen I can see that using % heights would work to ‘fill’ the page (probably c.25% each for the header/nav and the same for each button)….as long as it all adds up to 100%.

Is it a case of how to force 100% height?

[kaimotta]

Yeah I’ve done that. I have this page working pretty much, it’s just when the heights of the phone screens are different, but the widths are the same, it start to mess with the page.

[kaimotta]

It’s also the media queries have to change quite a lot to deal with the logo that would be in the top left hand corner etc and of course the menu

[kaimotta]

I’m just wondering if there is an easier way to approach this, instead of using media queries…

[Author]

Posts