Currently, I am working on designing websites specifically for Android phones. However, I have encountered a major challenge due to the wide range of screen resolutions found on these devices. Some phones boast a height of 800px while others are limited to just 320px. This disparity has led me to consider implementing fluid layouts, although I am still uncertain about how to ensure that my mobile website fills up the entire user's screen and maintains a visually appealing appearance when dealing with varying heights like 800px compared to 320px.
After creating a mobile site, I noticed that its display was subpar across different Android devices when viewed through a simulator (appearing as a tiny icon on some devices).
I came across a relevant question on Stack Overflow related to my concerns: Tips for optimizing a website for Android's browser?
In response, a user suggested using Meta tags such as 'HandheldFriendly' and 'viewport' to address the actual device size and prevent unwanted resizing. Additionally, they mentioned utilizing "CSS media queries" and provided the following example:
@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);
While this seems to target different screen sizes, I am still struggling to grasp the concept behind it. Despite hours of searching for tutorials on mobile website design, I have yet to find comprehensive resources, possibly due to the relatively new nature of the field or my inability to locate them. While browsing Android-specific sites, I noted that most were geared towards app developers and only provided a list of screen sizes without detailed instructions on crafting visually appealing websites that optimize screen space.
If anyone can offer tutorials, tips, or links to assist me in understanding how to create a mobile website that fully occupies a phone screen (or comes close to it) instead of appearing as a small icon, I would greatly appreciate it. Thank you.
(I also hope to incorporate high-quality, optimized images into my mobile site, but I am unsure of how to achieve this effectively. Would a fluid design approach be suitable for image optimization as well?)