1
votes

I have an air application that I have developed that only I use at the moment. It works fine but I have recently got a 4K monitor and am annoyed at the applications that are not written to support the custom DPI settings in windows that you use to make sure that text is actually still readable on this high DPI screen.

...it turns out that my application is not written to support this...

Can I get hold of the custom DPI value and use that somehow?

I have used the applicationDPI setting when developing for mobile before but it does not seem to help much here. I have set it to 120, the lowest and the application is still tiny. If I set it higher it gets even smaller.

There seems to be a problem with the runtimeDPI on Windows. Using this very simple app:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       applicationDPI="120">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.core.FlexGlobals;
        ]]>
    </fx:Script>

    <s:VGroup>
        <s:Label text="runtimeDPI: {FlexGlobals.topLevelApplication.runtimeDPI }" />
        <s:Label text="applicationDPI: { FlexGlobals.topLevelApplication.applicationDPI }" />
        <s:Button click="Alert.show('Hello, world')" label="Say Hello"/>
    </s:VGroup>
</s:WindowedApplication>

I have run this app on my laptop with a 1900*1200 display and on my desktop with the 4k monitor and both the runtime dpi values are 120. As the dpi value is the same on both there doesn't seem to be anything we can do to support higher resolution displays on the desktop.

It seems that we are just unable to make apps for high resolution displays.

1

1 Answers

0
votes

The higher the device's dpi, the smaller everything will look. The application will compensate for the higher DPI by setting larger font sizes.

Take for example how Apache Flex SDK handles the font sizes for a tabBar at

120DPI:

https://github.com/apache/flex-sdk/blob/develop/frameworks/projects/mobiletheme/defaults.css#L1283

640DPI:

https://github.com/apache/flex-sdk/blob/develop/frameworks/projects/mobiletheme/defaults.css#L1404

In your components and skins, you can check for the DPI and add custom logic to increase the size, distance, font size etc. so that your app looks correct.

Here is an example: https://github.com/apache/flex-sdk/blob/develop/frameworks/projects/mobiletheme/src/spark/skins/ios7/CheckBoxSkin.as#L97

Here is a nice overview of how to determine and handle DPI in runtime: http://help.adobe.com/en_US/flex/mobileapps/WS19f279b149e7481c682e5a9412cf5976c17-8000.html#WS19f279b149e7481c-6bd5f36412cc794cd7a-8000