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

[Manuel Quiñones]

Forgot to say that I have also tried with

    -webkit-min-device-pixel-ratio: 2

and other values.  But the test page gives 1.

2013/9/23 Manuel Quiñones <manuq at laptop.org>:
> 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 ..



-- 
.. manuq ..