diff --git a/packages/astro/e2e/fixtures/lit/src/pages/index.astro b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
index 6bc217505..5220080e7 100644
--- a/packages/astro/e2e/fixtures/lit/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/lit/src/pages/index.astro
@@ -22,5 +22,9 @@ const someProps = {
     <my-counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</my-counter>
+
+		<my-counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</my-counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/preact/src/pages/index.astro b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
index e9c582ba5..597398500 100644
--- a/packages/astro/e2e/fixtures/preact/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/preact/src/pages/index.astro
@@ -24,6 +24,10 @@ const someProps = {
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
+		<Counter id="counter-media" {...someProps}  client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
+
 		<PreactComponent id="client-only" client:only="preact" />
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/react/src/pages/index.astro b/packages/astro/e2e/fixtures/react/src/pages/index.astro
index 163618b13..7a847044e 100644
--- a/packages/astro/e2e/fixtures/react/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/react/src/pages/index.astro
@@ -24,6 +24,10 @@ const someProps = {
 			<h1>Hello, client:visible!</h1>
 		</Counter>
 
+		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
+
 		<ReactComponent id="client-only" client:only="react" />
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/solid/src/pages/index.astro b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
index a49d4db25..28d736895 100644
--- a/packages/astro/e2e/fixtures/solid/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/solid/src/pages/index.astro
@@ -22,5 +22,9 @@ const someProps = {
     <Counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
+
+		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
index 35a13e7f3..befd951c2 100644
--- a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro
@@ -22,5 +22,9 @@ const someProps = {
     <Counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
+
+		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/fixtures/vue/src/pages/index.astro b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
index 77327247b..411567562 100644
--- a/packages/astro/e2e/fixtures/vue/src/pages/index.astro
+++ b/packages/astro/e2e/fixtures/vue/src/pages/index.astro
@@ -22,5 +22,9 @@ const someProps = {
     <Counter id="counter-visible" {...someProps} client:visible>
 			<h1>Hello, client:visible!</h1>
 		</Counter>
+
+		<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
+			<h1>Hello, client:media!</h1>
+		</Counter>
   </body>
 </html>
diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js
index e6fc58808..00720ecc3 100644
--- a/packages/astro/e2e/lit.test.js
+++ b/packages/astro/e2e/lit.test.js
@@ -71,6 +71,24 @@ test.only('Lit', async ({ page, astro }) => {
 		await expect(label).toHaveText('Preact client:only component');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('HMR', async () => {
 		const afterHMR = onAfterHMR(page);
 
diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js
index a7db13452..9950d2035 100644
--- a/packages/astro/e2e/preact.test.js
+++ b/packages/astro/e2e/preact.test.js
@@ -64,6 +64,24 @@ test.only('Preact', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('client:only', async () => {
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js
index 0d6bc225b..b1fcb1d2f 100644
--- a/packages/astro/e2e/react.test.js
+++ b/packages/astro/e2e/react.test.js
@@ -64,6 +64,24 @@ test.only('React', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('client:only', async () => {
 		const label = page.locator('#client-only');
 		await expect(label).toBeVisible();
diff --git a/packages/astro/e2e/solid.test.js b/packages/astro/e2e/solid.test.js
index 0ce073145..2ba4449e4 100644
--- a/packages/astro/e2e/solid.test.js
+++ b/packages/astro/e2e/solid.test.js
@@ -64,6 +64,24 @@ test.only('Solid', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('HMR', async () => {
 		const afterHMR = onAfterHMR(page);
 
diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js
index 6732c3636..9c21c78eb 100644
--- a/packages/astro/e2e/svelte.test.js
+++ b/packages/astro/e2e/svelte.test.js
@@ -64,6 +64,24 @@ test.only('Svelte', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('#counter-media');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('HMR', async () => {
 		const afterHMR = onAfterHMR(page);
 
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js
index 1b2a78f0b..89acc4c58 100644
--- a/packages/astro/e2e/vue.test.js
+++ b/packages/astro/e2e/vue.test.js
@@ -64,6 +64,24 @@ test.only('Vue', async ({ page, astro }) => {
 		await expect(count).toHaveText('1');
 	});
 
+	await test.step('client:media', async () => {
+		const counter = page.locator('astro-root:nth-of-type(4)');
+		await expect(counter).toBeVisible();
+		
+		const count = counter.locator('pre');
+		await expect(count).toHaveText('0');
+
+		// test 1: not hydrated on large screens
+		const inc = counter.locator('.increment');
+		await inc.click();
+		await expect(count).toHaveText('0');
+
+		// test 2: hydrated on mobile (max-width: 50rem)
+		await page.setViewportSize({ width: 414, height: 1124 });
+		await inc.click();
+		await expect(count).toHaveText('1');
+	});
+
 	await test.step('HMR', async () => {
 		const afterHMR = onAfterHMR(page);