Index: src/wp-admin/css/customize-controls.css
===================================================================
--- src/wp-admin/css/customize-controls.css	(revision 36433)
+++ src/wp-admin/css/customize-controls.css	(working copy)
@@ -1490,6 +1490,124 @@
 }
 
 
+/* Device/preview size toggles */
+
+.wp-full-overlay {
+	background: #191e23;
+}
+
+#customize-preview.wp-full-overlay-main {
+	background-color: #f1f1f1;
+}
+
+.expanded #customize-footer-actions {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	width: 300px;
+	height: 45px;
+	border-top: 1px solid #ddd;
+}
+
+#customize-footer-actions .devices {
+	float: right;
+}
+
+#customize-footer-actions .devices button {
+	cursor: pointer;
+	background: transparent;
+	border: none;
+	height: 45px;
+	padding: 0 3px;
+	margin: 0 0 0 -4px;
+	box-shadow: none;
+	border-top: 1px solid transparent;
+	border-bottom: 4px solid transparent;
+	-webkit-transition: all .1s ease-in-out;
+	transition: all .1s ease-in-out;
+}
+
+#customize-footer-actions .devices button:focus {
+	box-shadow: none;
+	outline: none;
+}
+
+#customize-footer-actions .devices button:before {
+	display: inline-block;
+	-webkit-font-smoothing: antialiased;
+	font: normal 20px/30px "dashicons";
+	vertical-align: top;
+	margin: 3px 0;
+	padding: 4px 8px;
+	color: #656a6f;
+}
+
+#customize-footer-actions .devices button.active {
+	border-bottom-color: #191e23;
+}
+
+#customize-footer-actions .devices button:hover,
+#customize-footer-actions .devices button:focus {
+	background-color: #fff;
+	border-bottom-color: #0073aa;
+}
+
+#customize-footer-actions .devices button.active:before,
+#customize-footer-actions .devices button:hover:before,
+#customize-footer-actions .devices button:focus:before {
+	color: #191e23;
+}
+
+.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
+.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
+	color: #191e23;
+}
+
+#customize-footer-actions .devices .preview-desktop:before {
+	content: "\f472";
+}
+
+#customize-footer-actions .devices .preview-tablet:before {
+	content: "\f471";
+}
+
+#customize-footer-actions .devices .preview-mobile:before {
+	content: "\f470";
+}
+
+@media screen and (max-width:1024px) {
+	#customize-footer-actions .devices {
+		display: none;
+	}
+}
+
+.collapsed #customize-footer-actions .devices button:before {
+	display: none;
+}
+
+.collapsed #customize-footer-actions .devices .preview-full {
+	left: 0;
+}
+
+.preview-mobile #customize-preview {
+	margin: auto 0 auto -160px;
+	width: 320px;
+	height: 480px;
+	max-height: 100%;
+	max-width: 100%;
+	left: 50%;
+}
+
+.preview-tablet #customize-preview {
+	margin: auto 0 auto -3in;
+	width: 6in;
+	height: 9in;
+	max-height: 100%;
+	max-width: 100%;
+	left: 50%;
+}
+
+
 /* Responsive */
 .customize-controls-preview-toggle {
 	display: none;
Index: src/wp-admin/customize.php
===================================================================
--- src/wp-admin/customize.php	(revision 36433)
+++ src/wp-admin/customize.php	(working copy)
@@ -137,7 +137,7 @@
 					<button class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
 				</div>
 				<div class="customize-panel-description"><?php
-					_e( 'The Customizer allows you to preview changes to your site before publishing them. You can also navigate to different pages on your site to preview them.' );
+					_e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site to preview them.' );
 				?></div>
 			</div>
 
@@ -148,6 +148,15 @@
 		</div>
 
 		<div id="customize-footer-actions" class="wp-full-overlay-footer">
+			<?php if ( $wp_customize->get_previewable_devices() ) : ?>
+			<div class="devices">
+				<?php foreach ( $wp_customize->get_previewable_devices() as $device => $settings ) : ?>
+					<button type="button" class="preview-<?php echo $device; if ( isset( $settings['default'] ) && $settings['default'] ) { echo ' active" aria-pressed="true"'; } else { echo '" aria-pressed="false"'; } ?> data-device="<?php esc_attr_e( $device ); ?>">
+						<span class="screen-reader-text"><?php echo $settings['label']; ?></span>
+					</button>
+				<?php endforeach; ?>
+			</div>
+			<?php endif; ?>
 			<button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
 				<span class="collapse-sidebar-arrow"></span>
 				<span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
Index: src/wp-admin/js/customize-controls.js
===================================================================
--- src/wp-admin/js/customize-controls.js	(revision 36433)
+++ src/wp-admin/js/customize-controls.js	(working copy)
@@ -3605,6 +3605,25 @@
 			event.preventDefault();
 		});
 
+		// Preview size toggles.
+		api.previewedDevice = new api.Value();
+		$( '#customize-footer-actions .devices button' ).on( 'click', function( event ) {
+			api.previewedDevice.set( $( event.currentTarget ).data( 'device' ) );
+		});
+
+		api.previewedDevice.bind( function( newDevice ) {
+			var overlay = $( '.wp-full-overlay' ), devices = '';
+			$( '#customize-footer-actions .devices button' ).removeClass( 'active' )
+			                                                .attr( 'aria-pressed', false );
+			$.each( api.settings.previewableDevices, function( device, settings ) {
+				devices = devices + ' preview-' + device;
+			} );
+			overlay.removeClass( devices )
+			       .addClass( 'preview-' + newDevice );
+			$( '#customize-footer-actions .devices' ).find( '.preview-' + newDevice ).addClass( 'active' )
+			                                                                         .attr( 'aria-pressed', true );
+		} );
+
 		// Bind site title display to the corresponding field.
 		if ( title.length ) {
 			api( 'blogname', function( setting ) {
Index: src/wp-includes/class-wp-customize-manager.php
===================================================================
--- src/wp-includes/class-wp-customize-manager.php	(revision 36433)
+++ src/wp-includes/class-wp-customize-manager.php	(working copy)
@@ -1710,6 +1710,7 @@
 			'nonce'    => $this->get_nonces(),
 			'autofocus' => array(),
 			'documentTitleTmpl' => $this->get_document_title_template(),
+			'previewableDevices' => $this->get_previewable_devices(),
 		);
 
 		// Prepare Customize Section objects to pass to JavaScript.
@@ -1787,6 +1788,39 @@
 	}
 
 	/**
+	 * Returns a list of devices to allow previewing.
+	 *
+	 * @access public
+	 * @since 4.5.0
+	 * @return array List of devices with labels and default setting.
+	 */
+	public function get_previewable_devices() {
+		$devices = array(
+			'desktop' => array(
+				'label' => __( 'Enter desktop preview mode' ),
+				'default' => true,
+			),
+			'tablet' => array(
+				'label' => __( 'Enter tablet preview mode' ),
+			),
+			'mobile' => array(
+				'label' => __( 'Enter mobile preview mode' ),
+			),
+		);
+		/**
+		 * Filter the available devices to allow previewing in the Customizer.
+		 *
+		 * @since 4.5.0
+		 *
+		 * @see WP_Customize_Manager::get_previewable_devices()
+		 *
+		 * @param array $devices List of devices with labels and default setting.
+		 */
+		$devices = apply_filters( 'customize_previewable_devices', $devices );
+		return $devices;
+	}
+
+	/**
 	 * Register some default controls.
 	 *
 	 * @since 3.4.0