Designing web page for Android webview

Selasa, 6 November 2012, 9:31 pm

Android screen built-in resolutions (based on API 8-16):

Android screen density

Android webview viewport size (100% width and height)

In the HTML page, make sure we lock the webpage from being resize/zoom

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1" />

To design responsive web page, pay attention to webview viewport size in writing the css media query. From the viewport size table above, if we’re designing for portrait orientation only, we have a set of widths: 320, 360, 400, 600, 800 (601 can use 600 width styles). So our css code must be organized like this:

/* width: 800 */
.container { width: 800px; }

/* width: 600 */
@media (max-width: 799px) {
    .container { width: 600px; }
}

/* width: 400 */
@media (max-width: 599px) {
    .container { width: 400px; }
}

/* width: 360 */
@media (max-width: 399px) {
    .container { width: 360px; }
}

/* width: 320 */
@media (max-width: 359px) {
    .container { width: 320px; }
}

Note: Since landscape width got more, choose widths that can be grouped together, e.g: 420, 480, 530, 960, 1024, 1280

In handling different screen density using css, it’s recommended to display images as background of html elements.
HTML:

<i class="icon ok"></i>

CSS:

.icon {
    width: 50px;
    height: 50px;
    display: block;
    background-size: 50px 50px;
}
.icon.ok {
    background-image: url(img/mdpi/icon_ok.png);
}

That’s for the base density (mdpi). For other densities:

/* density: xhdpi */
@media screen and (-webkit-device-pixel-ratio: 2.0) {
    .icon.ok { background-image: url(img/xhdpi/icon_ok.png); }
}

/* density: hdpi */
@media screen and (-webkit-device-pixel-ratio: 1.5) {
    .icon.ok { background-image: url(img/hdpi/icon_ok.png); }
}

/* density: ldpi */
@media screen and (-webkit-device-pixel-ratio: 0.75) {
    .icon.ok { background-image: url(img/ldpi/icon_ok.png); }
}

Note: for tvdpi, it’ll use hdpi stylesheet & resize accordingly.

Image sizes. To know what image size you need, use pixel ratio to resize the image (base design is using 1.0 pixel ratio). Image DPI (dot per inch) is 72. E.g: