Updates, Tips, and Everything in Between

Developer Notes

Tip: Detecting a Mobile Browser with Javascript

There are a lot of existing ways to detect whether the browser is being used in a mobile device. You can use Modernizr to check for Touch support, check for whether Touch events are supported by the browser, or check the width of the screen. We previously used a combination of these, but they only worked most of the time.

Mozilla has recommended a better and shorter way to detect a mobile device and it is much more stable and reliable so far:

In summary, we recommend looking for the string “Mobi” anywhere in the User Agent to detect a mobile device.

if ( navigator.userAgent.match(/Mobi/) ) {
    // We are in a mobile device
}
Developer Notes

Image Dimensions Get Lost when JetPack’s Photon is Activated

Jetpack issue submitted: https://github.com/Automattic/jetpack/issues/2281

If you do this:

$attachmentImage = wp_get_attachment_image_src( 1234, 'full' );
$url = $attachmentImage[0];
$width = $attachmentImage[1];
$height = $attachmentImage[2];

$width and $height should give out the image dimensions, but when Photon is activated, both don’t get returned.

The workaround for this is discussed here:https://wordpress.org/support/topic/wp_get_attachment_image_src-changed?replies=5#post-3950371

The workaround is to get the dimensions without Photon, then get the image URL normally:

add_filter( 'jetpack_photon_override_image_downsize', '__return_true' );
$imageInfo = wp_get_attachment_image_src( 1234, 'full' );
remove_filter( 'jetpack_photon_override_image_downsize', '__return_true' );

$attachmentImage = wp_get_attachment_image_src( 1234, 'full' );
$url = $attachmentImage[0];
$width = $imageInfo[1];
$height = $imageInfo[2];