How to make scroll-time/speed and TranslateX string length dependent in css animation

Configuration Frontend
,
8

If you want to detect mobile devices, use combined conditions for true/false

window.matchMedia('(max-width: 400px) and (orientation: portrait)')

This checks if the viewport width is 400 pixels or less and if the orientation is portrait.

media_screen:
  variables:
    is_min_400: >
      [[[
        return window.matchMedia('(min-width:400px)').matches ? true : false;
      ]]]
    is_portait: >
      [[[
        return window.matchMedia('(orientation: portrait)').matches ? true : false;
      ]]]
    is_mobile_portrait: >
      [[[
        return window.matchMedia('(max-width: 400px) and (orientation: portrait)').matches;
      ]]]


        label: >
          [[[ let is_min_400 = variables.is_min_400;
              let is_portrait = variables.is_portrait;
              let is_mobile_portrait = variables.is_mobile_portrait;
              let output = is_mobile_portrait ? 'Mobile Portrait' : "Not Mobile Portrait";

              return output;
          ]]]

for a more accurate result, feel free to add a window navigator property