diff --git a/bundlesize.config.json b/bundlesize.config.json
index bb5cf9b..1261e9a 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -5,11 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "9.7 kB"
-	},
-	{
-		"resourceModule": "skins.vector.styles.responsive",
-		"maxSize": "0.6 kB"
+		"maxSize": "9.8 kB"
 	},
 	{
 		"resourceModule": "skins.vector.legacy.js",
diff --git a/includes/Hooks.php b/includes/Hooks.php
index 8cf067a..e7caec8 100644
--- a/includes/Hooks.php
+++ b/includes/Hooks.php
@@ -3,7 +3,6 @@
 namespace Vector;
 
 use Config;
-use ExtensionRegistry;
 use HTMLForm;
 use MediaWiki\MediaWikiServices;
 use OutputPage;
@@ -53,35 +52,6 @@ class Hooks {
 		return $config->get( 'VectorWvuiSearchOptions' );
 	}
 
-	/**
-	 * BeforePageDisplayMobile hook handler
-	 *
-	 * Make Legacy Vector responsive when $wgVectorResponsive = true
-	 *
-	 * @see https://www.mediawiki.org/wiki/Manual:Hooks/BeforePageDisplay
-	 * @param OutputPage $out
-	 * @param SkinTemplate $sk
-	 */
-	public static function onBeforePageDisplay( OutputPage $out, $sk ) {
-		if ( !$sk instanceof SkinVector ) {
-			return;
-		}
-
-		$mobile = false;
-		if ( ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) ) {
-
-			$mobFrontContext = MediaWikiServices::getInstance()->getService( 'MobileFrontend.Context' );
-			$mobile = $mobFrontContext->shouldDisplayMobileView();
-		}
-
-		if (
-			self::isSkinVersionLegacy()
-			&& ( $mobile || $sk->getConfig()->get( 'VectorResponsive' ) ) ) {
-			$out->addMeta( 'viewport', 'width=device-width, initial-scale=1' );
-			$out->addModuleStyles( 'skins.vector.styles.responsive' );
-		}
-	}
-
 	/**
 	 * SkinPageReadyConfig hook handler
 	 *
diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index 185df4b..14463ea 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -83,7 +83,20 @@ class SkinVector extends SkinMustache {
 			$options['scripts'] = [ 'skins.vector.legacy.js' ];
 			$options['styles'] = [ 'skins.vector.styles.legacy' ];
 			$options['template'] = 'skin-legacy';
+		} else {
+			// For historic reasons, the viewport is added when Vector is loaded on the mobile
+			// domain. This is only possible for 3rd parties or by useskin parameter as there is
+			// no preference for changing mobile skin.
+			$responsive = $this->getConfig()->get( 'VectorResponsive' );
+			if ( ExtensionRegistry::getInstance()->isLoaded( 'MobileFrontend' ) ) {
+				$mobFrontContext = MediaWikiServices::getInstance()->getService( 'MobileFrontend.Context' );
+				if ( $mobFrontContext->shouldDisplayMobileView() ) {
+					$responsive = true;
+				}
+			}
+			$options['responsive'] = $responsive;
 		}
+
 		$options['templateDirectory'] = __DIR__ . '/templates';
 		parent::__construct( $options );
 	}
diff --git a/resources/skins.vector.styles.responsive.less b/resources/skins.vector.styles.responsive.less
deleted file mode 100644
index b9ab2bc..0000000
--- a/resources/skins.vector.styles.responsive.less
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
-	The styles below essentially place the navigation menu below the content,
-	instead of to the side of it. They also hide the logo, as there's no space
-	left for it.
-*/
-@import 'mediawiki.ui/variables.less';
-
-@media screen and ( max-width: @width-breakpoint-tablet ) {
-	#mw-head {
-		position: static !important; /* stylelint-disable-line declaration-no-important */
-		margin-top: 0.5em;
-	}
-
-	/* Move the panel to the bottom and display it as in-line lists */
-	#mw-navigation {
-		#mw-panel {
-			display: table;
-			position: static;
-			table-layout: fixed;
-			width: 100%;
-			overflow: hidden;
-			font-size: 150%;
-
-			.portal {
-				display: block;
-				width: 100%;
-			}
-
-			ul li {
-				list-style: none;
-			}
-		}
-	}
-
-	/* Hide the logo and tabs */
-	#p-logo {
-		display: none;
-	}
-
-	/* Rearrange various page elements to fill the now-available space */
-	body .mw-footer {
-		margin-left: 0;
-		padding-top: 0;
-
-		/* don't need these in the footer either... */
-		#footer-info-lastmod,
-		#footer-info-viewcount {
-			display: none;
-		}
-	}
-
-	#p-personal {
-		display: table;
-		position: relative;
-		width: 100%;
-		top: inherit;
-		left: inherit;
-		right: inherit;
-
-		ul {
-			padding-left: 0;
-		}
-	}
-
-	#right-navigation {
-		// float: none; Override not needed with `position: absolute` above.
-		position: absolute;
-		top: inherit;
-		right: 0;
-		margin-top: 0;
-	}
-
-	#left-navigation {
-		// float: none; Override not needed with `position: absolute` above.
-		position: absolute;
-		top: inherit;
-		margin: 0;
-		display: block;
-	}
-
-	#p-namespaces,
-	#p-views,
-	#p-variants {
-		position: relative;
-		top: 2.5em;
-	}
-
-	#p-namespaces {
-		padding-left: 0;
-	}
-
-	#p-cactions {
-		top: 2.5em;
-		float: right;
-	}
-
-	#p-search {
-		// float: none; Override not needed with `position: absolute` above.
-		position: absolute;
-		right: 0;
-		width: 100vw;
-		margin: 0;
-	}
-
-	#simpleSearch {
-		margin: 0 3em;
-		width: 80vw;
-		padding: 0;
-	}
-
-	.vector-menu-dropdown .vector-menu-content-list {
-		left: inherit;
-		right: -1px;
-	}
-
-	.mw-body {
-		/* Hide the 1px blue border on the left side */
-		border-left: 0;
-		margin-left: 0;
-	}
-
-	#mw-data-after-content {
-		margin-left: 0;
-	}
-}
diff --git a/resources/skins.vector.styles/layout-default.less b/resources/skins.vector.styles/layout-default.less
index 7d198d8..d4a1eb1 100644
--- a/resources/skins.vector.styles/layout-default.less
+++ b/resources/skins.vector.styles/layout-default.less
@@ -178,6 +178,10 @@ body {
 	background-color: @background-color-page-container;
 }
 
+.skin--responsive .mw-page-container {
+	min-width: auto;
+}
+
 // Used as a container for absolutely positioned elements.
 .mw-page-container-inner {
 	position: relative;
diff --git a/skin.json b/skin.json
index 1519fb2..19cae65 100644
--- a/skin.json
+++ b/skin.json
@@ -65,7 +65,6 @@
 		"vector": "GlobalVarConfig::newInstance"
 	},
 	"Hooks": {
-		"BeforePageDisplay": "Vector\\Hooks::onBeforePageDisplay",
 		"SkinPageReadyConfig": "Vector\\Hooks::onSkinPageReadyConfig",
 		"GetPreferences": "Vector\\Hooks::onGetPreferences",
 		"PreferencesFormPreSave": "Vector\\Hooks::onPreferencesFormPreSave",
@@ -108,13 +107,6 @@
 			],
 			"styles": [ "resources/skins.vector.styles/skin.less" ]
 		},
-		"skins.vector.styles.responsive": {
-			"targets": [
-				"desktop",
-				"mobile"
-			],
-			"styles": [ "resources/skins.vector.styles.responsive.less" ]
-		},
 		"skins.vector.icons": {
 			"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
 			"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
@@ -215,14 +207,15 @@
 			"description": "options for configuring where where max-width should and should not apply. More details can be found in Hooks::shouldDisableMaxWidth PHP documentation."
 		},
 		"VectorResponsive": {
-			"value": false
+			"value": false,
+			"description": "@var boolean When wgVectorDefaultSkinVersion is set to 2, turn Vector into a responsive skin by applying a view port and disabling the min-width"
 		},
 		"VectorShowSkinPreferences": {
 			"value": true,
 			"description": "@var boolean Show skin-specific user preferences on the Special:Preferences appearance tab when true and hide them otherwise."
 		},
 		"VectorDefaultSkinVersion": {
-			"value": "1",
+			"value": "2",
 			"description": "@var string:['2'|'1'] The version ('2' for latest, '1' for legacy) of the Vector skin to use for anonymous users and as a fallback. The value is _not_ persisted."
 		},
 		"VectorDefaultSkinVersionForExistingAccounts": {