Loading different content based on viewport width

hello!

I’m trying to load a gallery content type in single.php (30+, with 10-20 images each). I’d like to make the images responsive for small devices and use the sizes I’ve created with wordpress already:
add_image_size( ‘galleryimage’, 1100, 730, true );
add_image_size( ‘gallerylistimage’, 400, 275, true );
and more…

These aren’t included in the content area but loaded using wp_get_attachment_image_src and using the_content as the description.

• <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘galleryimage’ ); ?>
  <img src=”<?php echo $image[0]; ?>” alt=”<?php the_title(); ?>”>

I was thinking of using ajax to load a different custom gallery loop based on viewport.

Is there a better way to do this and is there any downfalls to doing it this way?

thanks!