@moonbase.sh/storefront 2.2.0 → 2.3.0

package/README.md

@@ -55,6 +55,16 @@ The CDN loader recognises an `?mb_version=` query parameter for opting into a no
 
 Don't use this to pin a production embed to a specific version — pin the `<script src>` URL instead.
 
+## Host page requirements
+
+The widget renders directly into the host page's DOM and inherits its viewport. For the widget to render correctly on mobile, the host page should declare a standard responsive viewport:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+```
+
+Hosts that ship a fixed-width legacy mobile viewport (for example Wix's classic mobile sites use `<meta name="viewport" content="width=320, user-scalable=yes">`) cause the browser to upscale every CSS pixel on the page. The widget auto-detects this and counter-scales itself with CSS `zoom` to remain readable; opt out with `disableViewportCompensation: true` if you want the widget to match the host's upscaled density. On Wix specifically, mounting the widget into a contained element via `target` is also an option — it switches the drawer from a viewport overlay to an in-flow component and sidesteps the upscale entirely.
+
 ## Trigger intents
 
 Use intent methods to open specific views or execute actions:

package/dist/moonbase.d.ts

@@ -322,6 +322,13 @@ declare interface MoonbaseOptions {
         cards: 'outlined' | 'shadow' | 'white';
     };
     target: HTMLElement | undefined;
+    /**
+     * When the host page declares a fixed-width mobile viewport (e.g. Wix's
+     * legacy `<meta name="viewport" content="width=320, ...">`), the browser
+     * upscales every CSS pixel to fit the device. Set this to `true` to opt out
+     * of the widget's automatic counter-scaling and match the host's density.
+     */
+    disableViewportCompensation: boolean;
 }
 
 export declare const urlKey: InjectionKey<string>;