wp_is_mobile(): bool

Test if the current browser runs on a mobile device (smart phone, tablet, etc.)

Return

bool

More Information

This Conditional Tag checks if the user is visiting using a mobile device. This is a boolean function, meaning it returns either TRUE or FALSE. It works through the detection of the browser user agent string ($_SERVER[‘HTTP_USER_AGENT’])

Do not think of this function as a way of detecting phones. Its purpose is not detecting screen width, but rather adjusting for the potentially limited resources of mobile devices. A mobile device may have less CPU power, memory and/or bandwidth available. This function will return true for a tablet, as it too is considered a mobile device. It is not a substitute for CSS media queries or styling per platform.

One way that this function could be used in a theme is to produce a very light version of the site that does not have the large payload of the desktop site. Note that both the desktop and the mobile versions of the page will still need to be responsive, as an older portrait phone will have a significantly different width than a modern iPad in landscape. wp_is_mobile() will be true for both. Similarly a desktop browser window may not be displayed at full width. Essentially this approach may double the amount of work you will need to put into the theme. Yet for a tightly optimized theme or a unique mobile experience, it may be essential. It also means that a proper theme may have at least three different responsive design specs: Desktop, Mobile and AMP.

Additionally, care must be taken when using this function in a public theme. If your theme works differently for mobile devices and desktop devices, any page caching solution used MUST keep separate mobile/non-mobile buckets. Many caching solutions do not do this or charge for this feature. Even the most detailed read me file may not be able to adequately explain these details

Source

function wp_is_mobile() {
	if ( isset( $_SERVER['HTTP_SEC_CH_UA_MOBILE'] ) ) {
		// This is the `Sec-CH-UA-Mobile` user agent client hint HTTP request header.
		// See <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-UA-Mobile>.
		$is_mobile = ( '?1' === $_SERVER['HTTP_SEC_CH_UA_MOBILE'] );
	} elseif ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
		$is_mobile = false;
	} elseif ( str_contains( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) // Many mobile devices (all iPhone, iPad, etc.)
		|| str_contains( $_SERVER['HTTP_USER_AGENT'], 'Android' )
		|| str_contains( $_SERVER['HTTP_USER_AGENT'], 'Silk/' )
		|| str_contains( $_SERVER['HTTP_USER_AGENT'], 'Kindle' )
		|| str_contains( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' )
		|| str_contains( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' )
		|| str_contains( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	/**
	 * Filters whether the request should be treated as coming from a mobile device or not.
	 *
	 * @since 4.9.0
	 *
	 * @param bool $is_mobile Whether the request is from a mobile device or not.
	 */
	return apply_filters( 'wp_is_mobile', $is_mobile );
}

Hooks

apply_filters( ‘wp_is_mobile’, bool $is_mobile )

Filters whether the request should be treated as coming from a mobile device or not.

Changelog

VersionDescription
6.4.0Added checking for the Sec-CH-UA-Mobile request header.
3.4.0Introduced.

User Contributed Notes

  1. Skip to note 6 content

    Note: Whilst caching issues are mentioned in more information for this function it cannot be re-stated enough that any page caching, which does not split itself into mobile and non-mobile buckets, will break this function. If your page caching is global and a desktop device triggers a refresh, the return of this function will always be FALSE until the next refresh. Likewise if a mobile device triggers the refresh, the return will always be TRUE. IF you expect the result of this function to change on a per user basis, ensure that you have considered how caching will affect your code.

You must log in before being able to contribute a note or feedback.