[Sugar-devel] [Sugar Web] Supporting different screen DPIs - XO-4

Manuel Quiñones manuq at laptop.org
Mon Sep 23 07:33:00 EDT 2013

So with this small change we can have a CSS that suits the 200 dpi of
the XO screen:

    - @subcell-size: 11px;
    + @subcell-size: 15px;

And we can use CSS3 media queries to use that CSS

According to that, the proper media query should be:

    <link rel="stylesheet" media="min-resolution: 200dpi" href="css/test.css">

Considering <http://wiki.laptop.org/go/Display#Quick_Summary>.  But
seems that webkitgtk is not not supporting 'resolution', and utilities
like <http://mediaqueriestest.com/> confirm that.  I get:

- resolution: not supported
- min-device-width in px: 1200px
- min-device-height in px: 900px
- min-device-width in in: 12in
- min-device-height in in: 9in

The latter two values are wrong, the XO screen is 6 x 4 inches.

This post explains better the odd situation in webkit

This works:

    <link rel="stylesheet" media="screen and (min-device-width: 1200px)
    and (min-device-height: 900px)" href="css/test.css">

But the proper way to do it is by considering the pixel density or
dpi, or the size in inches, not the size in pixels.

I also tried setting device-dpi in the viewport attributes of webview

    viewport_attributes = webview.get_viewport_attributes()
    viewport_attributes.props.device_dpi = 200

But it has no visual effect and mediaqueriestest.com gives the same
values.  I hope the situation in WebKitGTK2 is better.

.. manuq ..

More information about the Sugar-devel mailing list