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

[Manuel Quiñones]

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
<http://www.w3.org/TR/css3-mediaqueries/>

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
<http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/>

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
<http://webkitgtk.org/reference/webkitgtk/stable/WebKitViewportAttributes.html#WebKitViewportAttributes--device-dpi>

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

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


-- 
.. manuq ..