Quantcast

Wrong CSS DPI Buckets Being Chosen

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Wrong CSS DPI Buckets Being Chosen

bilbosax
I am playing with CSS to try and get a hang of setting my font sizes based on a device's DPI.  I did not set the applicationDPI at the application level, assuming that if it is not set, it will set itself to an appropriate DPI bucket.  Then, I trace the applicationDPI and the Capabilities.screenDPI.  When I debug it on my iPad, it traces that it's Capabilities.screenDPI is 264, which according to the link below, should map the device to a DPI bucket of 240.  But it traces the applicationDPI as 320, and the CSS rule that it is selecting is the 320 rule.  How do I get the application to set the applicationDPI to 240 when the Capabilities.screenDPI is 264, and force it to use the 240 CSS rule?

https://flex.apache.org/asdoc/mx/core/RuntimeDPIProvider.html#includeExamplesSummary

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" applicationComplete="appCreationCompleteHandler(event)" creationPolicy="all">
       
        <fx:Style>
                @namespace s "library://ns.adobe.com/flex/spark";
                @namespace mx "library://ns.adobe.com/flex/mx";
               
                @media (application-dpi: 160) {
                        s|Label {
                                fontSize: 40;
                        }
                }
               
                @media (application-dpi: 240) {
                        s|Label {
                                fontSize: 100;
                        }
                }
               
                @media (application-dpi: 320) {
                        s|Label {
                                fontSize: 15;
                        }
                }
               
               
        </fx:Style>
        <fx:Script>
               
<![CDATA[
			import mx.events.FlexEvent;
			
			public var appWidth:int;
			public var appHeight:int;
			public var appDPI:int;
			
			protected function appCreationCompleteHandler(event:FlexEvent):void
			{
				appWidth = stage.stageWidth;
				appHeight = stage.stageHeight;
				appDPI = Capabilities.screenDPI;
				testText.text = "Width = "+appWidth.toString()+" Height = "+appHeight.toString()+" DPI = "+appDPI.toString();
				
				trace(applicationDPI, Capabilities.screenDPI);
				
			}
			
		]]>

        </fx:Script>
       
        <s:Label id="testText" horizontalCenter="0" verticalCenter="-300"/>
       
</s:Application>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Wrong CSS DPI Buckets Being Chosen

bilbosax
In other words, based on a Capabilities.screenDPI of 262, why isn't the applicationDPI or runtimeDPI being mapped to 240 as one would expect, and therefore selecting the incorrect CSS rules?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Wrong CSS DPI Buckets Being Chosen

OmPrakash Muppirala
Is it a retina iPad?  There is a list of exceptions listed in this link
[1],  which says:

   - All retina iPads receive 320 DPI

If you see the code in [2], you can see that iPad retina's are simply
assigned a DPI of 320 regardless of what Capabilities.screenDPI reports.

The good news is that this is configurable, you can simply supply a
runtimeDPIProvider class to Application and implement your own logic to
calculate the DPI as per your application needs.  An example can be seen
here: [1] and [3]

Hope this helps.

Thanks,
Om

[1] https://flex.apache.org/asdoc/mx/core/RuntimeDPIProvider.html#runtimeDPI
[2]
https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d608e6abc914409a1a4ae2/frameworks/projects/framework/src/mx/core/RuntimeDPIProvider.as#L143
[3]
https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d608e6abc914409a1a4ae2/frameworks/projects/framework/asdoc/en_US/mx/core/examples/RuntimeDPIProviderExample.as

On Mon, Mar 6, 2017 at 1:09 PM, bilbosax <[hidden email]> wrote:

> In other words, based on a Capabilities.screenDPI of 262, why isn't the
> applicationDPI or runtimeDPI being mapped to 240 as one would expect, and
> therefore selecting the incorrect CSS rules?
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/Wrong-CSS-DPI-Buckets-Being-Chosen-
> tp14779p14780.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Wrong CSS DPI Buckets Being Chosen

bilbosax
Thanks Om, that was a good find and explains a lot as I was beginning to think the system was broken :)  This will help me a TON, and gives me confidence that I am doing things right!!
Loading...