Show different number of posts in mobile landscape and portrait mode.

  • I want to show the different number of posts on my mobile according to its orientation. I am using this code 

    function set_posts_per_page( $query ) {
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
if(wp_is_mobile())
  	 {
  	 	if ($iphone == true)
        {
             $query->set( 'posts_per_page', 24 );
        }
        else if ( $ipad == true)
        {
            $query->set( 'posts_per_page', 22 );
        }
        else{
        	$query->set( 'posts_per_page', 10 );
        }
  	 }
  	 else{
  	 	$query->set( 'posts_per_page', 24 );
  	 } 
}
add_action( 'pre_get_posts',  'set_posts_per_page'  );

    how to check moiles orientation with wp_is_mobile().

    • This topic was modified 5 years, 2 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello riya0011,

    A way would be to store the orientation change in a cookie through jQuery and access it with the $_COOKIE variable in PHP.

    However, you would still need the javascript hooks to detect the orientation change and possibly a page reload.

    You can use a orientationchange event that can help you further.

    Hope this information helps.

    Thanks.

    Thread Starter riya0011

    (@riya0011)

    Hi,
    I have tried $_COOKIE but I’m confused with how can we fetch from server when user rotates the screen without page load option and how can I use orientationchange event in function.php file. I have tried fetching device witdh but I’m confused how to use it in function.php file
    viewportwidth = window.innerWidth;
    viewportheight = window.innerHeight;

    Hello riya0011,

    You can use jQuery to set the cookie and later use this in your functions.php

    var clientInfo = {
  browserWidth: $(window).width(),
  browserHeight: $(window).height(),
  flexboxSupport: Modernizr.flexbox,
  SVGSupport: Modernizr.svg
};

document.cookie = "_clientInfo=" + JSON.stringify(clientInfo);

    Further, use this in PHP

    $json = $_COOKIE['_clientInfo'];
$obj = json_decode(stripslashes($json));

    If you don’t find this as an ideal way, try out Mobile Detect is a lightweight PHP class for detecting mobile devices (including tablets). It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment.

    Hope the information helps.

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Show different number of posts in mobile landscape and portrait mode.’ is closed to new replies.