How to load content depending on screen size without hiding using CSS?

May

6/9/23, 4:57 PM

I have a responsive site. Lots of content is hidden depending on screen size.

This slows down page speed. And on slow devices has a lot of content shifting whilst content is hidden/shown.

In drupal 7 I used browser cap, to detect whether the browser was mobile or desktop and was able to not show blocks/content without having to hide them via CSS.

Is there a way in Drupal 9 to only have content loaded for certain devices, rather than use breakpoints and css to hide content?

Thanks

0 + 0

theming

Joseph

6/9/23, 5:03 PM

This may be an exercise for your design and writing department, to find the right design so as not to be dependent on screen size, and the right amount of text to keep the user reading. I would avoid trying to tie this to every possible screen size, [that's will just be a maintenance nightmare](https://youtu.be/tzfHlEFd2Fk?t=1252).

Score:1

Drupal

leymannx

6/9/23, 5:24 PM

https://github.com/serbanghita/Mobile-Detect/ lists a few Drupal modules in its README, one of the being Drupal 8/9 ready: Mobile Detect. Nice sets of features and even cacheability been taken care of.

PHP
$md = \Drupal::service('mobile_detect');
$is_mobile = $md->isMobile();
$is_tablet = $md->isTablet();
Twig Extensions
{% if is_mobile() %}
{% if is_tablet() %}
{% if is_device('iPhone') %}
{% if is_ios() %}
{% if is_android_os() %}
About the cache contexts:

By design, the "Internal Page Cache" core module assumes that all pages served to anonymous users will be identical, regardless of the implementation of cache contexts.

If you want to use the mobile_detect cache contexts to vary the content served to anonymous users, "Internal Page Cache" must be disabled, and the performance impact that entails incurred.

More info: https://www.drupal.org/docs/drupal-apis/cache-api/cache-contexts