Show the Screen Width in WordPress for Logged-in Users

When you fine-tune a responsive WordPress design, you want to know the exact screen width at which a layout breaks. Browser dev tools show it, but only while they are open and docked.

This snippet shows a small black badge with the current screen width in the bottom right corner of the front end. It updates while you resize the window, and only logged-in users who can edit content see it. Visitors do not even download the code.

The snippet

<?php
/**
 * Show the current screen width in the bottom right corner of the front end,
 * for logged-in users who can edit content. Visitors never get the code.
 */

// ===== Config =====
function dpc_screen_width_capability() {
	return 'edit_posts'; // Who sees it. 'read' = every logged-in user, 'manage_options' = admins only.
}
// ===== End of config =====

add_action( 'wp_enqueue_scripts', 'dpc_screen_width_assets' );

function dpc_screen_width_assets() {
	if ( ! is_user_logged_in() || ! current_user_can( dpc_screen_width_capability() ) ) {
		return;
	}
	if ( wp_script_is( 'dpc-screen-width', 'enqueued' ) ) {
		return; // Already added.
	}

	$css = '.dpc-screen-width{position:fixed;right:0;bottom:0;z-index:100000;margin:0;padding:6px 10px;font:600 13px/1.4 ui-monospace,Menlo,Consolas,monospace;color:#fff;background:rgba(0,0,0,.8);pointer-events:none}';

	$js = <<<'JS'
(function () {
	var badge = document.createElement('p');
	badge.className = 'dpc-screen-width';
	badge.setAttribute('aria-hidden', 'true');
	document.body.appendChild(badge);

	function update() {
		badge.textContent = 'Screen width: ' + window.innerWidth + 'px';
	}

	update();
	window.addEventListener('resize', update);
})();
JS;

	// Handles without a file: WordPress prints only the inline code.
	wp_register_style( 'dpc-screen-width', false, array(), null );
	wp_add_inline_style( 'dpc-screen-width', $css );
	wp_enqueue_style( 'dpc-screen-width' );

	wp_register_script( 'dpc-screen-width', false, array(), null, array( 'in_footer' => true ) );
	wp_add_inline_script( 'dpc-screen-width', $js );
	wp_enqueue_script( 'dpc-screen-width' );
}

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Everywhere, tick PHP under Script location, paste the code into the PHP editor and publish. Leave Action/Hook empty.

The earlier version of this post used a Conditions block with a header CSS part, a footer JS part and the custom condition is_user_logged_in(). One PHP block is simpler: it checks the user on wp_enqueue_scripts, when WordPress knows who is logged in, and prints its own CSS and JS. Turn the block off with the quick toggle in the Code Blocks list when you do not need it, and on again later.

The same code also works unchanged in a small plugin or an mu-plugin.

How it works

On wp_enqueue_scripts the snippet checks is_user_logged_in() and current_user_can( 'edit_posts' ). Everyone else gets nothing.
The CSS and JS are registered as handles without a file, so WordPress prints only the inline code: the style in the head and the script in the footer.
The script is plain JavaScript, no jQuery. It adds a <p class="dpc-screen-width"> to the body and writes window.innerWidth into it on load and on every resize.
window.innerWidth includes the scrollbar, which is the width CSS media queries use, so the number matches your breakpoints.
pointer-events: none lets you click through the badge, and aria-hidden keeps it out of screen readers.

Customise it

Admins only: return 'manage_options' from dpc_screen_width_capability().
Other corner: change right:0;bottom:0 in $css, for example to left:0;bottom:0.
Also show the height: add + ' × ' + window.innerHeight + 'px' to the text.

Gotchas

Page caching plugins usually skip logged-in users, so the badge is not cached for visitors. If yours caches logged-in pages, exclude them.
Mobile device emulation in dev tools reports the emulated width, which is what you want to check.
For JavaScript that runs on load and resize, see Update on load and resize.

In the Scripts Organizer library Import it with one click from Scripts Organizer.