.png%3Falt%3Dmedia%26token%3Dec51a220-b675-4bdb-9c07-1c6e9ccb3811)
.png%3Falt%3Dmedia%26token%3Dec51a220-b675-4bdb-9c07-1c6e9ccb3811)
Examples
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
Last modified 1yr ago