I'm trying to have a different loop for different screen resolution...

Example: one loop if my resolution is higher of 1000px widht, another one if lower of 1000px.

I tried this:

    <div class="row">

    if( $(window).width() < 2000 ) {

<?php global $query_string; // required
$posts = query_posts($query_string.'&offset=1&post_per_page=12'); ?>


   else if( $(window).width() < 680 ) {
        <?php global $query_string; // required
$posts = query_posts($query_string.'&offset=6&post_per_page=12'); ?>


        <?php while ( have_posts() ) { the_post(); ?>

But without success . . . . if anybody can help me out ? It will be fantastic !

Thank you for your time :)


query_posts is a PHP function, not a javascript function, it's executed on the server, and the resulting output is sent to the browser. By the time the browser gets the chance to run your if( $(window).width() < 2000 ) { check, it's already too late. The server has finished its PHP script, sent it across, and moved on to new requests.

There's also no way to know what the clients screen resolution is in PHP without workarounds, which don't work on the first page load.

But if you could do it in PHP, then there'd be difficult new problems, such as:

  • What if the screen is 1000px wide but the window is only 600px?
  • What if the device is rotated from landscape to portrait and is no longer 1000px wide?
  • What if a user with a 600px wide screen visits your site, and the page is cached, now all users with 1000px+ screens get the cached 600px page
  • What if your site is inside an iframe?
  • What if the user resizes the window? ( happens a lot more than you know, also happens anytime web inspector tools are brought up, or if a tablet has multi-app split screen support, e.g. Samsung phones, Android tablets, Windows 7-10, Windows RT/Surface, iOS 9+ )

Instead you need to use CSS and media queries to do this, do a single query and give different posts different classes.

My final note

query_posts. Never use this function to perform a query, if you must grab posts from the database use WP_Query, and if you need to change what posts are loaded on a page, use the pre_get_posts filter, don't create a brand new query and discard the original.

There is no valid use of the query_posts functions outside a handful of exotic circumstances thought up the core developers when stretched, and a lot of employers will see it as a sign of poor WordPress skills. If you continue to use this function you might come across other issues, including broken pagination issues

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.