diff --git a/docs/developing/previewing.md b/docs/developing/previewing.md index cda9b539948..6c558d2d5de 100644 --- a/docs/developing/previewing.md +++ b/docs/developing/previewing.md @@ -40,3 +40,43 @@ With `ionic serve` running, continue developing your app. As you save changes, t When implementing native functionality, use [Platform Detection](../core-concepts/cross-platform.md). When you're ready to test on a real device, see here for [iOS](ios.md) and [Android](android.md). + +## Simulating a Mobile Viewport + +Each major browser vendor includes developer tools for mobile emulation. These tools offer the ability to change the emulated device type. + +### Chrome + +Open your application at the local or remote address that it is being served from. For example, `http://localhost:4200`. Then, open the Chrome developer tools by pressing `Ctrl+Shift+I` on Windows/Linux or `Cmd+Opt+I` on Mac. + +Chrome Dev Tools + +From here you can select different device types from the dropdown, change the orientation of the device and throttle the network speed. + +For additional features and information visit: https://developer.chrome.com/docs/devtools/device-mode/. + +### Safari + +:::note + +Prerequisites: Show Develop menu in menu bar option must be enabled in Safari Advanced options. + +::: + +Open your application at the local or remote address that it is being served from. For example, `http://localhost:4200`. Select the **Develop** menu in Safari and select **Enter Responsive Design Mode** . Alternatively you can use the keyboard shortcut `Cmd+Opt+R`. + +Safari Responsive Design Mode + +From here you can select different device types to emulate as well as change the orientation of the device. + +For additional features and information visit: https://developer.apple.com/safari/tools/. + +### Firefox + +Open your application at the local or remote address that it is being served from. For example, `http://localhost:4200`. Then, open the Firefox developer tools by pressing `Ctrl+Shift+M` on Windows/Linux or `Cmd+Opt+M` on Mac. + +Firefox Responsive Design Mode + +From here you can select different device types from the dropdown, change the orientation of the device and throttle the network speed. + +For additional features and information visit: https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/. diff --git a/static/img/developing/previewing/chrome-dev-tools.png b/static/img/developing/previewing/chrome-dev-tools.png new file mode 100644 index 00000000000..d8117d850b2 Binary files /dev/null and b/static/img/developing/previewing/chrome-dev-tools.png differ diff --git a/static/img/developing/previewing/firefox-responsive-design-mode.png b/static/img/developing/previewing/firefox-responsive-design-mode.png new file mode 100644 index 00000000000..8dc07fdd8be Binary files /dev/null and b/static/img/developing/previewing/firefox-responsive-design-mode.png differ diff --git a/static/img/developing/previewing/safari-responsive-design-mode.png b/static/img/developing/previewing/safari-responsive-design-mode.png new file mode 100644 index 00000000000..f354511064a Binary files /dev/null and b/static/img/developing/previewing/safari-responsive-design-mode.png differ