Basically, I’m desinging websites for android phones, however, I’m finding that these phones have many different resolutions. The biggest problem is that some phones have a height of 800px and others only 320px lol. I’m assuming I need to do fluid layouts, but I’m still confused on how I can make a mobile website fill up the whole user’s screen and still look good if it’s 800px tall compared to 320px tall.
I madea mobile site, but realized it looked like complete crap on different android devices with the use of a simulator (it looks like a tiny icon on some devices).
I found this stack overflow question similar to what i’m asking: Tips for optimizing a website for Android's browser?
And the person said he uses Meta tags: HandheldFriendly and viewport which makes sense to account for the actual device size so it doesn’t resize, but then he mentioned “CSS media queries”. He gave this example of css media queries:
@import url(style-screen.css) screen;
@import url(style-small.css) print, handheld;
@import url(style-large.css) screen and (min-width: 801px);
@import url(style-small.css) screen and (max-width: 800px);
I’m assuming this is for different screen sizes, but I still don’t understand what he is doing. I have been searching for hours trying to find tutorials to show me how to do this basically, but mobile is so new I don’t think there are many resources out there or I’m missing them. I’ve seen android site, but it seems to be for app developers and they just list screen sizes, but not sure how to make them nice websites to fill the whole person’s screen lol.
If anyone has any tutrials or tips or links they could share with me to learn how to make a mobile website fill up a whole phone (or close to it) instead of having a tiny icon which is what my mobile website looks on it. thanks.
(i also want to add some nice mobile images optimized of course, but not sure how that would work either, would that be fluid also?)
css3 and media queries are suitable for your needs; some infos here