Among the wide range of valid resolutions that both Thinfinity Remote Desktop and Thinfinity VirtualUI offer, the most commonly used —because of its flexibility and simplicity— is “Fit to Browser”.
This configuration allows you to adjust the remote desktop / remote application to the available browser size. However, when it comes to accessing a desktop from different devices, the sometimes huge differences between screen sizes and resolutions (i.e. iPhone 4 vs a 27 inch iMac Retina Display) make it impossible to have a simple rule to determine the best remote size. Even when the application is adjusting properly to the available size, the screen rendered might still look tiny or disproportionate, making the user experience not as satisfactory as expected.
Tailoring “fit to browser”
Now, using a new configurable browser detection ruleset, we can tailor the way we want to see the remote desktop/application on every device. This ruleset allows you to specify rules that will detect the web browser, device and display characteristics and set the parameters to adjust the remote desktop/application resolution according to your own taste.
The main characteristics that are taken into account are:
- The browser User Agent, that tells about the web browser and device
- The device pixel ratio, that tells about the real display resolution
- The device display size
- The display orientation (landscape or portrait)
The browser detection ruleset is stored in a file with entries that contain specifications (rules) that match general or specific devices. Each entry (model) can inherit matching parameters (properties) from a more general model. For example, you can define an iOS model and an iPhone4 can inherit the iOS model properties.
A default ruleset file named BrowserRules.ini is installed in the corresponding Thinfinity’s program folder. Then, if it doesn’t exist there yet, it is copied to “\programData\Cybele Software\Thinfinity\{product}\” and renamed as Thinfinity.{product}.BrowserRules.ini. (where {product} is either RemoteDesktop or VirtualUI). You can safely customize this file as it won’t be overridden with a program update.
The structure of this file is as follow:
[default]
min-width = 640
min-height = 480
max-width = 2560
max-height = 1600
max-device-pixel-ratio = 1
[mobile]
parent-model = default
match-mobile = true
Model Inheritance
A section defines a model, and each model contains a set of properties.
Models are organized in an inheritance tree. The relationship between models is defined by a special property rule called parent-model, present in all models except [default], which is the tree’s root node and includes some base properties.
Every other model must directly or indirectly inherit from the [default] model. Also, each model contains its own rules and inherits all specifications from its ancestor.
When more than one criteria are met for a device, a scoring system is used to resolve this conflict.
Property reference
Properties can be divided in two groups: matching properties and applying properties.
Matching properties are those used to test the browser and device properties (such as the browser user agent, the device pixel ratio, the display orientation width and height, etc.) in order to choose the best model for each case.
| match-device-pixel-ratio | Matches any device with a specific pixel ratio. |
| match-mobile | Matches any mobile device. |
| match-orientation | Matches any device with the specified orientation: landscape or portrait. |
| match-screen-height-range | Matches any device with a screen height in the specified range. This range is expressed as From-To (for example, 900-1200). |
| match-screen-width-range | Matches any device with a screen width in the specified range. This range is expressed as From-To (for example, 400-600). |
| match-screen-height | Matches any device with a specified screen height. |
| match-screen-width | Matches any device with a specified screen width. |
| match-user-agent | Matches devices by comparing the device browser user agent to the string value supplied. This string is a regular expression. |
Applying properties are those used to determine the final size and resolution.
Use the parent-model property to set the parent model:
| parent-model | Establish the parent model for this model. |
The following properties deal with the display resolution:
| device-pixel-ratio | Overrides the original device pixel ratio, scaling the content accordingly. |
| max-device-pixel-ratio | This property determines the maximum device pixel ratio accepted. The lesser of the device’s device pixel ratio and this value is applied to scale the display. |
The following properties deal with the screen size of the remote desktop, in pixels. You can determine it by setting the actual height and width, or by establishing maximum and minimum values for these properties.
| height | Remote desktop height. |
| width | Remote desktop width. |
| max-height | Remote desktop maximum height. |
| max-width | Remote desktop maximum width. |
| min-height | Remote desktop minimum height. |
| min-width | Remote desktop minimum width. |
The following properties allow you to specify device screen areas that will never be used for displaying the remote connection, such as when a browser or device bar cannot be hidden and uses up screen space. These margins will be excluded for screen size calculations.
| margin-left | Width of an area at the left of the device screen that will not be used for displaying the remote desktop. |
| margin-bottom | Width of an area at the bottom of the device screen that will not be used for displaying the connection. |
| margin-right | Width of an area at the right of the device screen that will not be used for displaying the connection. |
| margin-top | Width of an area at the top of the device screen that will not be used for displaying the connection. |
Miscellaneous properties (only available to Thinfinity Remote Desktop):
| use-full-screen | For mobile only. If the device’s browser supports the full-screen mode, this property indicates the remote desktop size should be calculated to occupy the whole screen. When not in full screen, the content will be scaled. |
The calculation process
In order to choose a model from the ruleset, Thinfinity uses the client device type, dimensions, resolution, orientation and browser:
- If match-mobile exists, it tests if device is a mobile.
- If match-user-agent exists, it tests the browser’s User Agent.
- If match-device-pixel-ratio exists, it tests the device’s pixel ratio.
- If match-orientation exists, it tests the device’s orientation.
- If match-screen-width-range and match-screen-height-range exist, it tests to see if the screen size is in range.
- If match-screen-width and match-screen-height exist, it tests the exact screen size.
Once the model is selected, the parameters are applied in this way:
- If the width and height properties exist, then it applies them.
- If the browser width is less than the min-width, it applies min-width.
- If the browser height is less than the min-height, it applies min-height.
- If the browser width is greater than the max-width, it applies max-width.
- If the browser height is greater than the max-height, it applies max-height.
- If a specific device-pixel-ratio was specified, it applies it.
- If a max-device-ratio was specified, it takes the minimum of the real device pixel ratio and max-device-ratio property and applies it.
This example shows a possible ruleset and how it will affect different devices.
[default]
min-width = 640
min-height = 480
max-width = 2560
max-height = 1600
max-device-pixel-ratio = 1
[mobile]
parent-model = default
match-mobile = true
max-device-pixel-ratio = 2
[ipad]
parent-model = mobile
match-user-agent = ipad
[iphone4]
parent-model = mobile
match-user-agent = iphone
match-screen-width = 480
match-screen-height = 320
device-pixel-ratio = 1.5
In this case, when connecting with an iPad, the following models will be matched:
[default]: This model applies to all devices.
[mobile]: The iPad will match the match-mobile property.
[ipad]: The iPad will match the user agent keyword ‘ipad’ specified in the match-user-agent property.
The resulting properties for this device will be:
min-width = 640
min-height = 480
max-width = 2560
max-height = 1600
max-device-pixel-ratio = 2
Using the same ruleset, when connecting with an iphone4, the following models will be matched:
[default]: This model applies to all devices.
[mobile]: The iPhone will match the match-mobile property.
[iphone4]: The iPad will match the user agent keyword ‘iphone’ specified in the match-user-agent property, together with the match-screen-width and match-screen-height properties. An iphone6, with a screen width of 667px, and a screen height of 375px, would match the ‘iphone’ user agent keyword, but not the size.
The resulting properties for this device will be:
min-width = 640
min-height = 480
max-width = 2560
max-height = 1600
max-device-pixel-ratio = 2
device-pixel-ratio = 1.5
Try it yourself to find the best fit for your end-users.
Have any questions? Contact us at [email protected] or leave a message on this same post.