wp_is_mobile not working properly?

  • Resolved lockoloop

    (@lockoloop)


    2 years, 2 months ago

    Hi!

    So I made two different widget areas with different CSS classes to display my header menu and my product categories, one being for desktop, the other one for mobile.
    Works well when I fake a mobile phone in the developer options on desktop (Firefox), but my mobile widget area is being ignored on an actual phone and displays the desktop widget area instead… It was working 100% before, I think I last tried it a few months ago, then yesterday while checking on mobile it wasn’t working anymore. I don’t think I changed anything related to that in the functions file recently. The weirdest thing: it SOMETIMES works.
    Since it is still displaying the desktop menu and not showing the mobile one (and not either showing nothing or showing both), I don’t believe it has anything to do with the way I set up the widget areas.
    Could it be that I’m doing something wrong with the function is_mobile()? Could something interfere?
    Tested on my Alcatel 3X (Firefox) and Fairphone 3 (Firefox as well).

    //Mobile header + sidecart (displayed on non-shop pages as well)
if ( wp_is_mobile() ) {
	
	if ( !function_exists( 'LCKL_mobile_no_shop' ) ) {	
		function LCKL_mobile_no_shop() {
			get_sidebar( 'mobile-no-shop' );
		}		
		add_action('LCKL_before_footer','LCKL_mobile_no_shop', 5);

	}
}
    // EXCLUDE IPAD FROM WP_IS_MOBILE
function exclude_ipad( $is_mobile ) {
	if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false) {
		$is_mobile = false;
	}
	return $is_mobile ;
}
add_filter( 'wp_is_mobile', 'exclude_ipad' );
    /*Widget area Mobile sidebar*/
if ( is_active_sidebar( 'lckl-mobile-sidebar' ) ) : ?>
	<div id="mobile-widget-sidebar" role="complementary">
	<?php dynamic_sidebar( 'lckl-mobile-sidebar' ); ?>
	</div>
	<?php //Adds basket except on checkout page
	if ( ! is_checkout() ) : ?>
		<div class="" id="basket-icon"><i class="icon-basket"></i></div>	
	<?php endif;  ?>
<?php endif;  ?>

<?php 
/*Widget area Mobile header (with hook for second header on shop page)*/
if ( is_active_sidebar( 'lckl-above-mobile-header' ) ) : ?>
	<div id="mobile-widget-header" role="complementary">
		<div id="mobile-widget-header-row" role="complementary">
		<?php dynamic_sidebar( 'lckl-above-mobile-header' ); ?>
		</div>
		
		<?php do_action ('LCKL_mobile_shop'); ?>
	</div>

<?php endif; ?>
    /*Category list as a horizontal line on top*/
	#mobile-widget-header .LCKL_sidecatg {
		border: none;
		overflow-x: auto;
		text-align: center;
		width: 100%;
		display: inline-block;
		white-space: nowrap;		
    }
	
    #mobile-widget-header .LCKL_sidecatg a	{
		display: inline-block;
		margin: 0.5rem 0.2rem;	
		background-color: var(--beige);
		border-radius: 20px;
		padding: 6px 12px;
		color: var(--brown);
        font-size: 1.2rem;
    }
			
    
    #mobile-widget-header .LCKL_sidecatg a:hover,
	#mobile-widget-header .LCKL_sidecatg a:active  {
		background-color: var(--orange);
		color: var(--beige);
		}
 }
    • This topic was modified 2 years, 2 months ago by lockoloop.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • CP

    (@cparwebsites)

    Personally, I have not played much with the wp_is_mobile() function; but what I can share (and hopefully help give you more info to investigate) is that I have seen issues with caching in the past. I have not used it on any production websites either.

    Also, I believe many have recommended not to use wp_is_mobile() in themes. (Not sure reasoning)

    Moderator bcworkz

    (@bcworkz)

    Server side caching as Carl suggests can definitely cause problems with dynamic content. There are several techniques you can use to sidestep caching. Search the ‘net for “cache busting” to learn more.

    wp_is_mobile() is not infallible, it relies upon a partial match in the browser’s user agent string. If your phone does not send a user agent string with the right text, it will not be detected as a mobile device. You might need to add other checks to your hook into ‘wp_is_mobile’ to make it more reliable.

    It’s generally preferred to use responsive CSS for mobile content, instead of relying upon wp_is_mobile(). This and its innate fallibility could be why some recommend avoiding its use.

    Thread Starter lockoloop

    (@lockoloop)

    Sorry for the late reply, yeah apparently it resolved by itself, maybe I mixed up so files on my side.
    I do rely as much as I can on CSS but in that case, I really needed specific sidebars for the mobile version, so unless I put some “display:none” on anything only supposed to appear on desktop, it wouldn’t have solved the trick.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘wp_is_mobile not working properly?’ is closed to new replies.