php - How to change the amount of products on an archive page based on the viewer's screen width

Question

I've built a theme where based on different screen sizes, the amount of columns or products on the shop page changes (using CSS). This means that at some screen sizes the amount of products in the last row doesn't fill the row.

Example: I have set the amount of products at 12, so that at 1, 2, 3, 4 or 6 columns the last row is full of products. But at the screen width that will display 5 columns, the last row will only have 2 products in it.

I'm aware that I can use CSS to hide the remaining products (maybe using display: none;), but then that will mess with the pagination. So using the above example, it would hide products 11 and 12, but when the user moved to page 2, it would start at product 13, so they'd never get to see products 11 and 12.

This is the code I'm using in archive.php of the bones theme below:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">

<header class="article-header">

    <div class="featured-image"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( array(1000, 1000) ); ?></a></div>

    <h2 class="h2 entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

</header>

<section class="entry-content cf">
    <?php the_excerpt(); ?>
</section>

<footer class="article-footer cf">

    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>" class="button primary fill">Read More</a>

</footer>
</article>
<?php endwhile; ?>
<?php bones_page_navi(); ?>
<?php else : ?>

    <article id="post-not-found" class="hentry cf">
            <header class="article-header">
                <h1><?php _e( '', 'bonestheme' ); ?></h1>
        </header>
            <section class="entry-content">
                <p><?php _e( 'Something is missing. Try double checking things.', 'bonestheme' ); ?></p>
        </section>
        <footer class="article-footer">
                <p><?php _e( '', 'bonestheme' ); ?></p>
        </footer>
    </article>
<?php endif; ?>

Pagination Code (/library/bones.php):

// Numeric Page Navi (built into the theme by default)
function bones_page_navi() {
  global $wp_query;
  $bignum = 999999999;
  if ( $wp_query->max_num_pages <= 1 )
    return;
  echo '<nav class="pagination">';
  echo paginate_links( array(
    'base'         => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
    'format'       => '',
    'current'      => max( 1, get_query_var('paged') ),
    'total'        => $wp_query->max_num_pages,
    'prev_text'    => '&larr;',
    'next_text'    => '&rarr;',
    'type'         => 'list',
    'end_size'     => 3,
    'mid_size'     => 3
  ) );
  echo '</nav>';
} /* end page navi */

Answer 1

等待大神答复