[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Collapse]Common Concepts
  [Expand]Web.config Modifications
  [Expand]Callback Exception Handling
  [Expand]Client-Side Functionality
  [Expand]Cookies Support
  [Expand]Appearance Customization - Theming
   Icon Collection
  [Expand]Performance Optimization
  [Expand]CSS Image Sprites
   Data Annotation Attributes
   Supported Document Types
  [Expand]Accessibility Support
   Right to Left Support
   HTML Encoding
  [Expand]SharePoint Support
   Mobile Support
  [Expand]Office Document Management
   Cloud Storage Account Management
  [Expand]Web Farm and Web Garden Support
 [Expand]ASP.NET WebForms Controls
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Mobile Support

Mobile websites require touch-friendly UI elements and a layout that arranges content to fit a mobile browser window. DevExpress ASP.NET controls and MVC extensions provide features that transform a standard control's UI into a mobile-optimized version on demand. These capabilities allow you to create a page layout that is tailored to desktop and mobile devices.

This topic provides basic information about mobile website development using DevExpress ASP.NET controls and consists of the following sections:

Expanded Common Concepts

The following practices and concepts can help you develop mobile web applications:

Mobile-Friendly Layouts

A mobile-friendly layout should fit a page's content to the width of a browser's window that can have any size and orientation. This means layouts should be flexible and adapt content to different devices. Two general approaches are used to create these layouts:

  • Responsive web design - A common layout that resizes or reorders certain elements to fit the current window size.
  • Adaptive web design - Different page layouts that are displayed depending on the current window size.

You can create adaptive or responsive page layouts or combine them using DevExpress ASP.NET controls and MVC extensions.

Viewport settings

A viewport is a web page's visible part within a browser. Some web pages do not fit a mobile browser's window, so it scales pages down to display them entirely within the viewport and enable end-users to scale up them. However, the mobile-friendly layouts are designed to display all content without scaling, so it is required to specify the viewport settings that prevent this.

You can configure the viewport using the meta tag that should be placed in the HTML document's head section. We recommend using the following viewport settings:

These settings stretch the page content to the viewport's width and disable automatic and custom scaling.

Refer to the Using the viewport meta tag to control layout on mobile browsers to learn more about the viewport.

CSS 3 Media Queries

Media queries allow you to apply CSS styles depending on the viewport size. Use media queries to rearrange or display/hide elements when the viewport's width (or height) is more or less than a specified value.

The code below is a simple media query applied to the CSS class:

Apply this class to a page element to hide it when the viewport's width is less than 1024 px. You can apply a CSS class to a DevExpress control (or a control element) using its CssClass property:

Expanded Mobile-Friendly Controls

Most DevExpress ASP.NET Controls can be transformed to their mobile-friendly version by enabling built-in adaptivity modes. These modes make the control's UI (or its part) touch-friendly and rearrange the control's layout to fit the mobile browser window. In the following example, the Grid View control changes its UI when the browser's window becomes too narrow to display content in the default mode:

You can access a control's mobile-friendly modes via the corresponding control's SettingsAdaptivity property (for example, ASPxGridView.SettingsAdaptivity for the ASP.NET WebForms Grid View or GridViewSettings.SettingsAdaptivity for the ASP.NET MVC Grid View Extension). The table below lists demos that demonstrate the mobile-friendly controls' capabilities and the topics that describe the functionality that the SettingsAdaptivity property provides for each control.

Control

Demos

Topic

Grid View

Responsive Layout

Adaptive Layout

Adaptive Layout with Form Layout

Customization Dialog

Mobile-Friendly Grid View

Card View

Adaptive Layout

Text Truncation with Ellipsis

Mobile-Friendly Card View

Spreadsheet

UI Customization

Mobile-Friendly Spreadsheet

Rich Edit

Ribbon Customization

Mobile-Friendly Rich Edit

Scheduler

Adaptive Layout

Mobile-Friendly Scheduler

Form Layout

Responsive Layout

Mobile-Friendly Form Layout

Menu

Responsive Layout

Mobile-Friendly Menu

Panel

Responsive Layout

Responsive Layout with Scrolling

Mobile-Friendly Panel

Ribbon

One Line Mode

Compact Ribbon

HTML Editor

Full Screen Mode

Mobile Friendly HTML Editor

Popup

Adaptive Layout

Mobile Friendly Popup

File Manager

Responsive Layout

Mobile Friendly File Manager

Note

Certain controls' structural elements can have their own mobile-friendly settings. Their parent controls expose detached SettingsAdaptivity properties (for example, GridCustomizationDialogPopupSettings.SettingsAdaptivity for the Grid View's Customization Dialog). Their mobile-friendly functionality is described in the parent control's topic.

Expanded Bootstrap Support

DevExpress ASP.NET Webforms controls and MVC extensions could be combined with the Bootstrap's predefined classes if you included the Bootstrap library in your project.

The DevExpress ASP.NET subscription includes Bootstrap Web Forms, and Bootstrap ASP.NET Core controls that support mobile-friendly Bootstrap themes and adaptivity by design.

Expanded Other Capabilities

The DevExpress ASP.NET subscription includes additional tools and resources that can help you develop a mobile-friendly web application.

Template Gallery

The DevExpress ASP.NET Template Gallery provides a Responsive Web Application project template that you can use to create responsive web applications. This project template is available for MVC and WebForms.

You can also select the Bootstrap Web Application project template if you want to use the DevExpress ASP.NET WebForms Bootstrap controls.

DevExpress Themes

The DevExpress Themes contain the following mobile-optimized themes that include UI elements tailored to fit the average fingertip size, making them touch-friendly:

  • iOS
  • Material
  • MaterialCompact
  • Moderno
  • Mulberry
  • Office 365

You can also modify DevExpress Themes.

Expanded Online Demo

Expanded See Also

Is this topic helpful?​​​​​​​