diff --git a/.changeset/large-beans-draw.md b/.changeset/large-beans-draw.md
new file mode 100644
index 00000000000..ad0c0c10ebe
--- /dev/null
+++ b/.changeset/large-beans-draw.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Add support for [mobile safe areas](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
diff --git a/packages/starlight/components/ContentPanel.astro b/packages/starlight/components/ContentPanel.astro
index ca898afed5d..d7dd10d7f9c 100644
--- a/packages/starlight/components/ContentPanel.astro
+++ b/packages/starlight/components/ContentPanel.astro
@@ -4,10 +4,12 @@
 
 <style>
 	.content-panel {
-		padding: 1.5rem var(--sl-content-pad-x);
+		padding: var(--sl-content-pad-y) var(--sl-safe-content-pad-right) var(--sl-content-pad-y)
+			var(--sl-safe-content-pad-left);
 	}
 	.content-panel + .content-panel {
 		border-top: 1px solid var(--sl-color-hairline);
+		padding-bottom: var(--sl-safe-content-pad-bottom);
 	}
 	.container {
 		max-width: var(--sl-content-width);
diff --git a/packages/starlight/components/HeadSEO.astro b/packages/starlight/components/HeadSEO.astro
index d187bd98241..212c69d9251 100644
--- a/packages/starlight/components/HeadSEO.astro
+++ b/packages/starlight/components/HeadSEO.astro
@@ -22,7 +22,7 @@ const headDefaults: z.input<ReturnType<typeof HeadConfigSchema>> = [
 	{ tag: 'meta', attrs: { charset: 'utf-8' } },
 	{
 		tag: 'meta',
-		attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+		attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
 	},
 	{ tag: 'title', content: title },
 	{ tag: 'link', attrs: { rel: 'canonical', href: canonical?.href } },
diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro
index 6dc7c130da1..0e94e29106a 100644
--- a/packages/starlight/components/Header.astro
+++ b/packages/starlight/components/Header.astro
@@ -42,8 +42,15 @@ const { locale } = Astro.props;
 		:global(:root:not([data-has-toc])) {
 			--__toc-width: 0rem;
 		}
+		:global([dir='rtl']) .header {
+			--__sl-safe-nav-pad-x: var(--sl-safe-nav-pad-right);
+		}
 		.header {
-			--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+			--__sl-safe-nav-pad-x: var(--sl-safe-nav-pad-left);
+			--__sidebar-width: max(
+				0rem,
+				var(--sl-content-inline-start, 0rem) - var(--__sl-safe-nav-pad-x)
+			);
 			--__main-column-fr: calc(
 				(
 						100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
diff --git a/packages/starlight/components/Sidebar.astro b/packages/starlight/components/Sidebar.astro
index a5b3216f2e8..22f1f77115e 100644
--- a/packages/starlight/components/Sidebar.astro
+++ b/packages/starlight/components/Sidebar.astro
@@ -23,7 +23,7 @@ const { sidebar, locale } = Astro.props;
 <style>
 	.sidebar {
 		height: 100%;
-		padding: 1rem var(--sl-sidebar-pad-x);
+		padding: 1rem var(--sl-safe-sidebar-pad-right) 1rem var(--sl-safe-sidebar-pad-left);
 		flex-direction: column;
 		gap: 1rem;
 	}
@@ -36,7 +36,7 @@ const { sidebar, locale } = Astro.props;
 
 	@media (min-width: 50rem) {
 		.sidebar > :global(:nth-last-child(2)) {
-			padding-bottom: 1rem;
+			padding-bottom: var(--sl-safe-sidebar-pad-bottom);
 		}
 	}
 </style>
diff --git a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro
index 917db0707da..e1782ddfa05 100644
--- a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro
+++ b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro
@@ -51,7 +51,7 @@ const t = useTranslations(locale);
 		align-items: center;
 		height: var(--sl-mobile-toc-height);
 		border-bottom: 1px solid var(--sl-color-hairline-shade);
-		padding: 0.5rem 1rem;
+		padding: 0.5rem var(--sl-safe-mobile-toc-pad-right) 0.5rem var(--sl-safe-mobile-toc-pad-left);
 		font-size: var(--sl-text-xs);
 		outline-offset: var(--sl-outline-offset-inside);
 	}
diff --git a/packages/starlight/components/TableOfContents/TableOfContentsList.astro b/packages/starlight/components/TableOfContents/TableOfContentsList.astro
index 27623c64fbd..ac1a7ce0582 100644
--- a/packages/starlight/components/TableOfContents/TableOfContentsList.astro
+++ b/packages/starlight/components/TableOfContents/TableOfContentsList.astro
@@ -46,18 +46,22 @@ const { toc, isMobile = false, depth = 0 } = Astro.props;
 		background-color: var(--sl-color-text-accent);
 	}
 	.isMobile a {
-		--pad-inline: 1rem;
+		--pad-inline: var(--sl-mobile-toc-list-pad-x);
 		display: flex;
 		justify-content: space-between;
 		gap: var(--pad-inline);
 		border-top: 1px solid var(--sl-color-gray-6);
 		border-radius: 0;
 		padding-block: 0.5rem;
+		padding-right: var(--sl-safe-mobile-toc-list-pad-right);
 		color: var(--sl-color-text);
 		font-size: var(--sl-text-sm);
 		text-decoration: none;
 		outline-offset: var(--sl-outline-offset-inside);
 	}
+	:global([dir='rtl']) .isMobile a {
+		padding-left: var(--sl-safe-mobile-toc-list-pad-left);
+	}
 	.isMobile:first-child > li:first-child > a {
 		border-top: 0;
 	}
diff --git a/packages/starlight/layout/PageFrame.astro b/packages/starlight/layout/PageFrame.astro
index a86d315bc74..d6f75fe9c96 100644
--- a/packages/starlight/layout/PageFrame.astro
+++ b/packages/starlight/layout/PageFrame.astro
@@ -42,8 +42,8 @@ const t = useTranslations(locale);
 		width: 100%;
 		height: var(--sl-nav-height);
 		border-bottom: 1px solid var(--sl-color-hairline-shade);
-		padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
-		padding-inline-end: var(--sl-nav-pad-x);
+		padding: var(--sl-safe-nav-pad-top) var(--sl-safe-nav-pad-right) var(--sl-nav-pad-y)
+			var(--sl-safe-nav-pad-left);
 		background-color: var(--sl-color-bg-nav);
 	}
 
@@ -78,7 +78,10 @@ const t = useTranslations(locale);
 
 	@media (min-width: 50rem) {
 		:global([data-has-sidebar]) .header {
-			padding-inline-end: var(--sl-nav-pad-x);
+			padding-right: var(--sl-safe-nav-pad-right);
+		}
+		:global([dir='rtl'][data-has-sidebar]) .header {
+			padding-left: var(--sl-safe-nav-pad-left);
 		}
 		.sidebar-pane {
 			--sl-sidebar-visibility: visible;
diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css
index aaba636cb15..b1a55de93c7 100644
--- a/packages/starlight/style/props.css
+++ b/packages/starlight/style/props.css
@@ -95,10 +95,14 @@
 	--sl-nav-pad-x: 1rem;
 	--sl-nav-pad-y: 0.75rem;
 	--sl-mobile-toc-height: 3rem;
+	--sl-mobile-toc-pad-x: 1rem;
+	--sl-mobile-toc-list-pad-x: 1rem;
 	--sl-sidebar-width: 18.75rem;
 	--sl-sidebar-pad-x: 1rem;
+	--sl-sidebar-pad-bottom: 1rem;
 	--sl-content-width: 45rem;
 	--sl-content-pad-x: 1rem;
+	--sl-content-pad-y: 1.5rem;
 	--sl-menu-button-size: 2rem;
 	--sl-nav-gap: var(--sl-content-pad-x);
 	/* Offset required to show outline inside an element instead of round the outside */
@@ -108,6 +112,21 @@
 	--sl-z-index-menu: 5;
 	--sl-z-index-navbar: 10;
 	--sl-z-index-skiplink: 20;
+
+	/* Safe areas values */
+	--sl-safe-nav-pad-left: var(--sl-nav-pad-x);
+	--sl-safe-nav-pad-right: var(--sl-nav-pad-x);
+	--sl-safe-nav-pad-top: var(--sl-nav-pad-y);
+	--sl-safe-sidebar-pad-left: var(--sl-sidebar-pad-x);
+	--sl-safe-sidebar-pad-right: var(--sl-sidebar-pad-x);
+	--sl-safe-sidebar-pad-bottom: var(--sl-sidebar-pad-bottom);
+	--sl-safe-content-pad-left: var(--sl-content-pad-x);
+	--sl-safe-content-pad-right: var(--sl-content-pad-x);
+	--sl-safe-content-pad-bottom: var(--sl-content-pad-y);
+	--sl-safe-mobile-toc-pad-left: var(--sl-mobile-toc-pad-x);
+	--sl-safe-mobile-toc-pad-right: var(--sl-mobile-toc-pad-x);
+	--sl-safe-mobile-toc-list-pad-left: var(--sl-mobile-toc-list-pad-x);
+	--sl-safe-mobile-toc-list-pad-right: var(--sl-mobile-toc-list-pad-x);
 }
 
 :root[data-theme='light'],
@@ -179,3 +198,40 @@
 		--sl-mobile-toc-height: 0rem;
 	}
 }
+
+@supports (padding: max(0px)) {
+	:root {
+		--sl-safe-nav-pad-left: max(var(--sl-nav-pad-x), env(safe-area-inset-left));
+		--sl-safe-nav-pad-right: max(var(--sl-nav-pad-x), env(safe-area-inset-right));
+		--sl-safe-nav-pad-top: max(var(--sl-nav-pad-y), env(safe-area-inset-top));
+		--sl-safe-sidebar-pad-left: max(var(--sl-sidebar-pad-x), env(safe-area-inset-left));
+		--sl-safe-sidebar-pad-right: max(var(--sl-sidebar-pad-x), env(safe-area-inset-right));
+		--sl-safe-sidebar-pad-bottom: max(var(--sl-sidebar-pad-bottom), env(safe-area-inset-bottom));
+		--sl-safe-content-pad-left: max(var(--sl-content-pad-x), env(safe-area-inset-left));
+		--sl-safe-content-pad-right: max(var(--sl-content-pad-x), env(safe-area-inset-right));
+		--sl-safe-content-pad-bottom: max(var(--sl-content-pad-y), env(safe-area-inset-bottom));
+		--sl-safe-mobile-toc-pad-left: max(var(--sl-mobile-toc-pad-x), env(safe-area-inset-left));
+		--sl-safe-mobile-toc-pad-right: max(var(--sl-mobile-toc-pad-x), env(safe-area-inset-right));
+		--sl-safe-mobile-toc-list-pad-left: max(
+			var(--sl-mobile-toc-list-pad-x),
+			env(safe-area-inset-left)
+		);
+		--sl-safe-mobile-toc-list-pad-right: max(
+			var(--sl-mobile-toc-list-pad-x),
+			env(safe-area-inset-right)
+		);
+	}
+
+	@media (min-width: 50rem) {
+		:root[data-has-sidebar] {
+			--sl-safe-sidebar-pad-right: var(--sl-sidebar-pad-x);
+			--sl-safe-content-pad-left: var(--sl-content-pad-x);
+			--sl-safe-mobile-toc-pad-left: var(--sl-mobile-toc-pad-x);
+		}
+		:root[dir='rtl'][data-has-sidebar] {
+			--sl-safe-sidebar-pad-left: var(--sl-sidebar-pad-x);
+			--sl-safe-content-pad-right: var(--sl-content-pad-x);
+			--sl-safe-mobile-toc-pad-right: var(--sl-mobile-toc-pad-x);
+		}
+	}
+}