1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 using IF IS <OnMobile>

Discussion in 'XenForo Development Discussions' started by swatme, Jul 18, 2013.

  1. swatme

    swatme Well-Known Member

    Hi
    im using xf 1.2 now

    how to determine if the user is onmobile/ipad/tablet/phone?

    basically i want to use if is and display text for mobile users and desktop pc.

    <xen:if is="onmobile/tablet/phone">
    WOW you are browsing thru your mobile
    <xen:else />
    Hi you are using desktop pc
    </xen:if>


    what is the code for on mobile?
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    There is no "mobile" variable as such. You would have to write JavaScript to determine it post load.
     
  3. RobParker

    RobParker Well-Known Member

    You can use media queries to determine the device resolution and maybe do something with that but device detection would be more useful for some applications.
     
  4. Russ

    Russ Well-Known Member

    You can put your text in a div where you want then do something like this:

    example:

    Code:
    <div class="mobileText">Mobile text here</div>
    <div class="desktopText">Desk top text here</div>
    
    Then css...

    Code:
    .mobileText { display: none; }
    @media (max-width:@maxResponsiveWideWidth)
    {
       .mobileText
       {
         display: block;
       }
       .desktopText
       {
         display: none;
       }
    }
    @media (max-width:@maxResponsiveMediumWidth)
    {
       .mobileText
       {
         display: block;
       }
       .desktopText
       {
         display: none;
       }
    }
    
    @media (max-width:@maxResponsiveNarrowWidth)
    {
       .mobileText
       {
         display: block;
       }
       .desktopText
       {
         display: none;
       }
    }
    
    This by default hides the mobileText for normal browsing, then once re-sized would show for the all responsive sizes and hides the desktopText. You might need some !important tags or better selectors on the CSS.
     
  5. Jeremy

    Jeremy XenForo Moderator Staff Member

    @Russ,

    If you just use the first definition (@maxResponsiveWideWidth), it'll display in all 3 since they are all using max-width.
     
    Russ likes this.
  6. Russ

    Russ Well-Known Member

    True, I was more using for reference as I wasn't sure if he wanted to display different things for the resolutions. But yes you could combine them of so.
     
    Jeremy likes this.
  7. swatme

    swatme Well-Known Member

    oh thanks guys

    basically ill be using it for adsense showing..
    if its mobile it will display mobile sizes ads
    else show the desktop sizes ads...

    i really thought mobile varialbe is already in xf 1.2
     
  8. Vincent

    Vincent Well-Known Member

Share This Page