Examples

Top  Previous  Next

 

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