Enhanced Browser and Device DPI support

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”.
“Fit to Browser” propertyThis 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:

  1. If match-mobile exists, it tests if device is a mobile.
  2. If match-user-agent exists, it tests the browser’s User Agent.
  3. If match-device-pixel-ratio exists, it tests the device’s pixel ratio.
  4. If match-orientation exists, it tests the device’s orientation.
  5. If match-screen-width-range and match-screen-height-range exist, it tests to see if the screen size is in range.
  6. 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:

  1. If the width and height properties exist, then it applies them.
  2. If the browser width is less than the min-width, it applies min-width.
  3. If the browser height is less than the min-height, it applies min-height.
  4. If the browser width is greater than the max-width, it applies max-width.
  5. If the browser height is greater than the max-height, it applies max-height.
  6. If a specific device-pixel-ratio was specified, it applies it.
  7. 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.

Leave a comment

Privacy Preferences
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.