XF 2.2 Condition to check screen (viewport) size

Solution
This thread is confusing :)

It is not possible to check screen size via <xf:if> as this is executed on the server which technically never can know the current screen size used on the client.

LESS / CSS in XenForo are templates (not files!) and can use all templater features (like conditionals). As those templates are not rendered for each client request (the output is cached on both client and server), conditionals in LESS / CSS templates can usually only be used to check style properties.

Depending on the usecase, media queries can be used for conditionally executing JavaScript
Code:
<xf:js>
if (window.matchMedia('screen and (min-width:400px)').matches)
{
alert ('Screen width is at least 400px');
}
</xf:js>
...

Tracy Perry

Well-known member
What exactly are you trying to do?
There is the ability to display (or not) data based upon viewport size.

This is an example from Brogan that will restrict the user banner display in the chosen viewport size.

Code:
@media (max-width: 400px)
{
    .userBanner
    {
        display: none !important;
    }
}

I'm sure in the actual templates if/then calls can be made.. the above is in extra.LESS.
 

Tracy Perry

Well-known member
We spoke about HTML.
Really? Can you show me where HTML is listed in the original post?

Hello. Is there some way to check screen (viewport) size with xenforo 2 conditions (xf:if)?
Seems I don't see it. ;)
That's why clarification was asked for... there IS the ability to control by viewport in templates... for certain things.
As I said... extra.less remains a template.... it may not be a template dealing with structural layout like many others, but it is still a template processed by the system.
 

Kirby

Well-known member
This thread is confusing :)

It is not possible to check screen size via <xf:if> as this is executed on the server which technically never can know the current screen size used on the client.

LESS / CSS in XenForo are templates (not files!) and can use all templater features (like conditionals). As those templates are not rendered for each client request (the output is cached on both client and server), conditionals in LESS / CSS templates can usually only be used to check style properties.

Depending on the usecase, media queries can be used for conditionally executing JavaScript
Code:
<xf:js>
if (window.matchMedia('screen and (min-width:400px)').matches)
{
alert ('Screen width is at least 400px');
}
</xf:js>

Using this approach it is also possible to load external JavaScript files based on media query results.
 
Solution

Tracy Perry

Well-known member
In XF environment maybe
Well, we aren't talking WordPress or pure HTML pages. We ARE talking about XF environment.
As @Kirby explained (and I was fairly sure I had seen similar done before) it is possible to address it via the standard templating system.
It's never been something I needed to do, so I didn't pay close attention to the examples I had seen in the past.
 

Joe Link

Well-known member
This thread is confusing :)

It is not possible to check screen size via <xf:if> as this is executed on the server which technically never can know the current screen size used on the client.

LESS / CSS in XenForo are templates (not files!) and can use all templater features (like conditionals). As those templates are not rendered for each client request (the output is cached on both client and server), conditionals in LESS / CSS templates can usually only be used to check style properties.

Depending on the usecase, media queries can be used for conditionally executing JavaScript
Code:
<xf:js>
if (window.matchMedia('screen and (min-width:400px)').matches)
{
alert ('Screen width is at least 400px');
}
</xf:js>

Using this approach it is also possible to load external JavaScript files based on media query results.

Any chance you could somehow use this to set a global variable which a conditional could use?

We're using @Russ's XenBase, which has a button to expand the sidebar (in a modal) on mobile devices. For tablets, the sidebar is collapsed in portrait and visible in landscape (same as low-res desktops). I'm trying to find a way to execute the sidebar ad request code only in landscape mode (when the sidebar is actually visible on the screen).

Edit: Nope :(
 
Top