Help / Editors / Window editor and page editor / Page editor / Responsive Web Design
  • Overview
  • Debugging options specific to Chrome, IE 11, Edge,...
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WindowsLinuxPHPWEBDEV - Browser code
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Stored procedures
In version 28, the "Responsive Web Design: layout by slice" mode becomes "Slices (legacy Responsive mode)".
"Responsive (zoning and layouts)" is now the recommended mode for any new project. For more details, see New edit mode for mobile-friendly websites.
This page is adapted to the new options of version 28.
The pages in Responsive Web Design mode can be checked like any other WEBDEV page in the browser of your choice. Then, all you have to do is reduce (in "Desktop First" mode) or increase (in "Mobile First" mode) the browser width to see the changes in the page.
To save time during the real tests on the different devices, a debugging option of browsers can be very useful. Used on the development computer during the "Go" test of pages, this option allows you to get a very precise idea of page rendering:
  • in their "Desktop" version, for browsers on PC or Mac,
  • when they are viewed from an iPhone, an iPad, a Samsung S4, a Nexus 5, 6, 7, ...
Debugging options specific to Chrome, IE 11, Edge,...
For example, with Chrome, press the F12 key to display the debugging options. The "Toggle Device Mode" button (Ctrl + Shift + M) is used to switch to "device mode" emulation:
Then, a "Device" combo box allows you to select a device in order to see the site like if it was a mobile device and not the development computer.
For example, the site is run from the test on a development computer in Windows but its rendering is identical to the one displayed on an Apple iPhone 6:
The standard rendering of the same site is as follows:
Very useful to check the "Office" version and the mobile version of a page for a site with dynamic serving, or to adapt a Responsive Web Design site.
The option is presented here in Chrome, it is also available in Internet Explorer 11 and Edge by using F12 then the "Emulation" pane.
Minimum version required
  • Version 21
Click [Add] to post a comment

Last update: 12/07/2022

Send a report | Local help