Adapt content to the viewport

This guide explains how to adapt the page content to the viewport of user's device.

When using the <MediaQuery> component (a thin wrapper around react-responsive's component, available in MediaQuery.tsx), Front-Commerce has to decide which viewport width to use during SSR.

We decided to use User-Agent based detection in order to choose a width. Even though it might not be perfect (the best solution still is to use CSS media queries as much as possible over render-time media queries with the above component) we think it brings a good user experience.

This behavior is leveraging Front-Commerce's configuration system to provide information about the device. The config object contains a device key with the following information that you can use to if needed:

config.device

{
  // User-Agent detection is memoized for each header value for this amount of time
  memoizationMaxAge: ONE_MINUTE_IN_MS,
  type: "phone", //  ["phone", "tablet", "pc", "tv", "bot"]
  viewportWidthInPx: 360
}

If you want to tweak this behavior, we invite you to browse the deviceConfigProvider for implementation details and contact us if you think of any improvements.