Is their template logic to output HTML based on display size?

[The Old Man]

I couldn't find anything in the docs, but I want to apply some different code in template logic for desktops, tablets and phones.

We can use media queries in CSS to make styling relevant for certain device screen widths and we have ipsResponsive_showPhone etc.

However, is there a utility available to do the same for HTML in IPS' template logic, perhaps a PHP expression or something?

Something like:

{{ is small-device/phone? }}
this code
{{elseif is medium-device/tablet? }}
this code
{{else}}
use this for everything else
{{endif}}

Many thanks!

[teraßyte]

No, there is no equivalent you can use in IF checks. What IPS does is include the multiple HTML blocks in the page output and then show/hide them with the CSS classes:

 

With outputting all of them, it won't matter even if the size changes. For example, the browser's window can be resized on desktop, or you can use the web developer tools to emulate a phone/table.

Edited December 16, 2023 by teraßyte

[The Old Man]

Thanks for the confirmation, I didn't want to reinvent the wheel and assumed there would be something built-in for IPS devs to reuse. I just want to insert some code in the head to preload an image based on device screen size. I'll have a look for some JS on MSDN.

 

[The Old Man]

I'm dumber than I look! 😁

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#media