diff --git a/examples/ui/viewport_debug.rs b/examples/ui/viewport_debug.rs
index c62d8ffd54395..3e6d9fb64e145 100644
--- a/examples/ui/viewport_debug.rs
+++ b/examples/ui/viewport_debug.rs
@@ -31,8 +31,10 @@ fn main() {
         .insert_resource(UiScale(2.0))
         .add_plugins(DefaultPlugins.set(WindowPlugin {
             primary_window: Some(Window {
-                resolution: [1600., 1200.].into(),
                 title: "Viewport Coordinates Debug".to_string(),
+                // This example relies on these specific viewport dimensions, so let's explicitly
+                // define them.
+                resolution: [1280., 720.].into(),
                 resizable: false,
                 ..Default::default()
             }),
@@ -164,9 +166,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
         .spawn((
             NodeBundle {
                 style: Style {
-                    width: Val::Px(800.),
-                    height: Val::Px(600.),
-                    border: UiRect::axes(Val::Px(40.), Val::Px(30.)),
+                    width: Val::Px(640.),
+                    height: Val::Px(360.),
+                    border: UiRect::axes(Val::Px(32.), Val::Px(18.)),
                     flex_wrap: FlexWrap::Wrap,
                     ..default()
                 },
@@ -178,9 +180,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
         .with_children(|builder| {
             builder.spawn(NodeBundle {
                 style: Style {
-                    width: Val::Px(240.),
-                    height: Val::Px(180.),
-                    border: UiRect::axes(Val::Px(30.), Val::Px(30.)),
+                    width: Val::Px(192.),
+                    height: Val::Px(108.),
+                    border: UiRect::axes(Val::Px(18.), Val::Px(18.)),
                     ..default()
                 },
                 background_color: PALETTE[2].into(),
@@ -190,8 +192,8 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    width: Val::Px(480.),
-                    height: Val::Px(180.),
+                    width: Val::Px(384.),
+                    height: Val::Px(108.),
                     ..default()
                 },
                 background_color: PALETTE[3].into(),
@@ -200,9 +202,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    width: Val::Px(360.),
-                    height: Val::Px(180.),
-                    border: UiRect::left(Val::Px(180.)),
+                    width: Val::Px(288.),
+                    height: Val::Px(108.),
+                    border: UiRect::left(Val::Px(144.)),
                     ..default()
                 },
                 background_color: PALETTE[4].into(),
@@ -212,9 +214,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    width: Val::Px(360.),
-                    height: Val::Px(180.),
-                    border: UiRect::right(Val::Px(180.)),
+                    width: Val::Px(288.),
+                    height: Val::Px(108.),
+                    border: UiRect::right(Val::Px(144.)),
                     ..default()
                 },
                 background_color: PALETTE[5].into(),
@@ -224,8 +226,8 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    width: Val::Px(480.),
-                    height: Val::Px(180.),
+                    width: Val::Px(384.),
+                    height: Val::Px(108.),
                     ..default()
                 },
                 background_color: PALETTE[6].into(),
@@ -234,9 +236,9 @@ fn spawn_with_pixel_coords(commands: &mut Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    width: Val::Px(240.),
-                    height: Val::Px(180.),
-                    border: UiRect::axes(Val::Px(30.), Val::Px(30.)),
+                    width: Val::Px(192.),
+                    height: Val::Px(108.),
+                    border: UiRect::axes(Val::Px(18.), Val::Px(18.)),
                     ..default()
                 },
                 background_color: PALETTE[7].into(),