From b2a07c26750fd4d81dad221d73e69c0e16b96f76 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Wed, 4 Oct 2023 16:57:23 -0700
Subject: [PATCH] docs: improve the emulation viewport doc (#27434)

Closes https://github.com/microsoft/playwright/issues/27428
---
 docs/src/emulation.md | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/docs/src/emulation.md b/docs/src/emulation.md
index 2bd95d9d20..a673659661 100644
--- a/docs/src/emulation.md
+++ b/docs/src/emulation.md
@@ -101,10 +101,17 @@ The viewport is included in the device but you can override it for some tests wi
 ```js tab=js-test title="playwright.config.ts"
 import { defineConfig } from '@playwright/test';
 export default defineConfig({
-  use: {
-    // Viewport used for all pages in the context.
-    viewport: { width: 1280, height: 720 },
-  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        // It is important to define the `viewport` property after destructuring `devices`,
+        // since devices also define the `viewport` for that device.
+        viewport: { width: 1280, height: 720 },
+      },
+    },
+  ]
 });
 ```
 
@@ -239,9 +246,17 @@ Whether the meta viewport tag is taken into account and touch events are enabled
 import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
-  use: {
-    isMobile: false,
-  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        // It is important to define the `isMobile` property after destructuring `devices`,
+        // since devices also define the `isMobile` for that device.
+        isMobile: false,
+      },
+    },
+  ]
 });
 ```