Browse Source

Use correct component to determine device size

gh-pages
Andrew Kingston 5 years ago
parent
commit
3be5e15f82
  1. 6
      packages/client/src/components/context/DeviceBindingsProvider.svelte

6
packages/client/src/components/context/DeviceBindingsProvider.svelte

@ -3,21 +3,25 @@
import { onMount } from "svelte" import { onMount } from "svelte"
let width = window.innerWidth let width = window.innerWidth
let height = window.innerHeight
const tabletBreakpoint = 768 const tabletBreakpoint = 768
const desktopBreakpoint = 1280 const desktopBreakpoint = 1280
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver(entries => {
if (entries?.[0]) { if (entries?.[0]) {
width = entries[0].contentRect?.width width = entries[0].contentRect?.width
height = entries[0].contentRect?.height
} }
}) })
$: data = { $: data = {
mobile: width && width < tabletBreakpoint, mobile: width && width < tabletBreakpoint,
tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint, tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
width,
height,
} }
onMount(() => { onMount(() => {
const doc = document.getElementById("device-root") const doc = document.getElementById("app-root")
resizeObserver.observe(doc) resizeObserver.observe(doc)
return () => { return () => {

Loading…
Cancel
Save