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…
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.
> 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?
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.
>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.
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
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".