No more switchable mobile/desktop layouts?

Contribute UX
,
5

There are limits to doing this that we’ve removed with new methods — determining capabilities on init is fairly inflexible, if something changes we’d have to reload the whole page.

This is useful because devices are less predictable now: phones can unfold into tablets, laptops can convert into tablets, you can plug in a keyboard and mouse to so many things…

It feels different if you’re used to the old way, but anything you were doing in an initializer is likely still possible and more responsive to changing capabilities.

You can, now it’s more granular and you conditionally show/hide content within the same template rather than swapping out the whole thing. For example, we have a viewport object in our capabilities service now…

In a template…

{{#if this.capabilities.viewport.lg}}
  Content for large screens
{{/if}}

{{#if this.capabilities.viewport.sm}}
  Content for very small screens 
{{/if}}

or in JS…

get myContent() {
  if (this.capabilities.viewport.sm) {
    return "short content";
  } else {
    return "the very very long content"
  }
}

and then in CSS you can align with the same breakpoints like…

@use "lib/viewport";

.my-element {
  font-size: 1em;
  @include viewport.until(sm) {
     font-size: 2em;
  } 
}
8 Likes