适用于不同屏幕尺寸的Android CSS

Question

I have a simple web page that displays some text and images and trying to find a non complicated way to handle multiple screens.

I have looked through the docs and the only way I can see to do it right now is having to create three separate css files, one for low, one for medium, and one for high res. Unfortunately each one of these have to have different font sizes and dimensions of every element/image.

This seems rather wasteful considering every hdpi element should just be exactly 1.5x the size of the normal one. Is there not a way to make Android just automatically scale this for us while using hdpi versions of the images instead of mdpi ones?

Am I missing something here?

Answer 1

You can try using Media Queries in your stylesheet.

Basically you say if viewport is smaller than X amount then initiate (or make changes to) this style or if viewport is larger then Y amount, implement (or update) this style. You can have as many possibilities as you wish and there is no need for extra styles because the change is implemented on the particular class or ID you choose once a certain width is reached.

Check out this article on Responsive Web Design

Hope this is the sort of info you are after?

Answer 2

I just looked on the very same issue. Well, it seems that Android doesn't automatically adjust the content of Webview (the image, the font size, etc) according to the screen size like what it does automatically with the app icon.

But, regarding the icon, actually, it's not automatically adjusted as well. You still have to provide the icon in three different sizes to accommodate the ldpi, mdpi, and hdpi resolution.

That's why we need to provide three different css files. But, actually, if you read the doc you mentioned previously, you can write those three different css in one file, like this:

header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

The upper part is for the mdpi, the middle one for the hdpi, and the lower part is for the ldpi. So, you can easily manage one file for those three different screen resolutions.