maui-404287-common-concepts-specify-device-specific-settings.md
DevExpress component suite for MAUI offers two ways to identify device parameters (OS type, orientation, form factor, and device type - physical or simulator):
The ON class members allow you to identify device parameters: operating system type, orientation, form factor (idiom), and device type (physical device or simulator). For example, the following code shows how to perform platform-specific actions:
using DevExpress.Maui.Core;
//...
if (ON.Android) {
// Your custom code here.
}
if (ON.iOS) {
// Your custom code here.
}
For more information, refer to the following help topic: ON Class.
The OnDisplaySize extension allows you to specify control settings (for example, the font size) depending on the physical screen size, regardless of the screen orientation.
<ContentPage ...
xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
<!--...-->
<dx:DXButton Content="Click"
FontSize="{dx:OnDisplaySize ExtraSmall='10', Small='12', Medium='14',
Large='16', ExtraLarge='18'}"/>
<!--...-->
</ContentPage>
Refer to the following help topic for more information: OnDisplaySizeExtension.
Note: In C# code, you can use the ON.DisplaySize method to set values depending on the screen size.
The OnScreenWidth and OnScreenHeight extensions allow you to specify control settings based on the current screen width or height depending on the screen orientation.
<ContentPage ...
xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
<!--...-->
<dx:DXButton Content="Click"
WidthRequest="{dx:OnScreenWidth ExtraSmall='100', Small='150', Medium='200',
Large='250', ExtraLarge='300'}"
HeightRequest="{dx:OnScreenHeight ExtraSmall='50', Small='75', Medium='100',
Large='150', ExtraLarge='200'}"/>
<!--...-->
</ContentPage>
Refer to the following help topics for more information:
Note: In C# code, you can use the ON.ScreenWidth and ON.ScreenHeight methods to set values depending on the screen width or height.
The OnOrientationExtension extension allows you to specify control settings (for example, the paddings) depending on the device orientation.
<ContentPage ...
xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
<!--...-->
<dx:DXButton Content="Click" Padding="{dx:OnOrientation Portrait='10,6', Landscape='12,8'}"/>
<!--...-->
</ContentPage>
Note: In C# code, you can use the ON.Orientation method to set values depending on the device orientation.
The following table describes different size classes:
|
Size class
|
Breakpoints
|
Sample Devices
|
Device Logical Resolution
| | --- | --- | --- | --- | |
ExtraSmall
|
height < 360,
width < 640
|
–
|
–
| |
Small
|
height ≥ 360,
width ≥ 640
|
iPhone SE 3rd gen, SE 2nd gen, 8, 7, 6, 6s
|
375 x 667
| |
Samsung Galaxy Note 9, S9+, S9, S8+, S8
|
360 x 740
| |
Samsung Galaxy S7 Edge, S7
|
360 x 640
| |
Medium
|
height ≥ 375,
width ≥ 732
|
iPhone 14 Pro
|
393 x 852
| |
iPhone 14, 13, 13 Pro, 12, 12 Pro
|
390 x 844
| |
iPhone 13 mini, 12 mini, 11 Pro, XS, X
|
375 x 812
| |
iPhone 11 Pro Max, 11, XR, XS Max
|
414 x 896
| |
iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus
|
414 x 736
| |
Samsung Galaxy Note 10+, 10, Google Pixel 4 XL, 4
|
412 x 869
| |
Google Pixel 3a XL, 3
|
412 x 824
| |
Google Pixel 3a
|
412 x 846
| |
Google Pixel 3 XL
|
412 x 847
| |
Nexus 6P, 5X, Google Pixel 2 XL, XL, Pixel
|
412 x 732
| |
Large
|
height ≥ 428,
width ≥ 853
|
iPhone 14 Pro Max
|
430 x 932
| |
iPhone 14 Plus, 13 Pro Max, 12 Pro Max
|
428 x 926
| |
Samsung Galaxy S20 Ultra, S20+, S20
|
480 x 1067
| |
Samsung Galaxy Note 5, LG G5, One Plus 3
|
480 x 853
| |
Extra Large
|
height ≥ 768,
width ≥ 1024
|
iPad
|
768 x 1024
| |
Samsung Galaxy Tab 10
|
800 x 1280
| |
Pixel C
|
900 x 1280
| |
Nexus 9
|
1536 x 2048
|
The height is calculated as follows: Pixel height / Density.
The width is calculated as follows: Pixel width / Density.
Refer to the following page for more information: Device display information.