Function useDisplay

Returns {
    device: Readable<"phone" | "tablet">;
    displaySize: Writable<number>;
    displaySizeDefault: number;
    frame: Readable<{ height: number; width: number }>;
    homeGridColumns: Writable<number>;
    homeGridColumnsDefault: number;
    homeGridColumnsMax: number;
    homeGridColumnsMin: number;
    homeGridRows: Writable<number>;
    homeGridRowsDefault: number;
    homeGridRowsMax: number;
    homeGridRowsMin: number;
    isSizeLimited: Readable<boolean>;
    motionPreference: Writable<MotionPreference>;
    motionPreferenceDefault: MotionPreference;
    phoneBox: Readable<{ height: number; width: number }>;
    phoneScale: Readable<number>;
    reducedMotion: Readable<boolean>;
}

• device: Readable<"phone" | "tablet">

  Which frame the app is in (MICA-260): 'phone' or 'tablet'. The one thing an app with a single root needs to lay itself out for either; an app that ships tablet.svelte already knows.

• displaySize: Writable<number>

  The Display > Phone Size setting, 0-100.

• displaySizeDefault: number

  Where the slider starts, so a Reset control needs no second copy of the number.

• frame: Readable<{ height: number; width: number }>

  The frame's design size in CSS px, before the zoom — 400x850 or 1280x800.

• homeGridColumns: Writable<number>

  Home Screen Grid — columns/rows, and their adjustable bounds.

• homeGridColumnsDefault: number

• homeGridColumnsMax: number

• homeGridColumnsMin: number

• homeGridRows: Writable<number>

• homeGridRowsDefault: number

• homeGridRowsMax: number

• homeGridRowsMin: number

• isSizeLimited: Readable<boolean>

  True when the window is smaller than the setting asks for, and is winning.

• motionPreference: Writable<MotionPreference>

  Motion. motionPreference is the player's three-way choice; reducedMotion is the resolved answer after the platform's own prefers-reduced-motion has been folded in, and is what an app would act on.

• motionPreferenceDefault: MotionPreference

• phoneBox: Readable<{ height: number; width: number }>

  The rendered size in CSS pixels, for showing the player what they picked.

• phoneScale: Readable<number>

  The zoom actually applied, after fitting to the window. Read-only.

• reducedMotion: Readable<boolean>