Mobile Demo Layout

The Mobile Demo Layout provides a mobile-optimized container for rendering demo pages with HD scaling and touch emulation capabilities.

Capabilities

MobileDemoLayout Component

The main layout component that wraps demo content with mobile-specific enhancements.

import { useOutlet, useSearchParams, useSiteData } from 'dumi';
import TouchEmulator from 'f2-touchemulator';
import React, { useEffect, useRef } from 'react';

/**
 * Mobile-optimized demo layout with HD scaling and touch emulation
 * Automatically resolved by dumi as the DemoLayout theme component
 * Component takes no props - uses dumi hooks to access route data and configuration
 */
const MobileDemoLayout: React.FC<{}>;

export const ROUTE_MSG_TYPE = 'dumi:update-iframe-route';

Features:

• Touch event simulation for desktop browsers (using f2-touchemulator)
• Responsive HD scaling based on configured rules
• Query parameter handling for styling and display options
• Automatic scaling mode detection and application

Route Message Type

Constant used for iframe communication between the layout and parent frame.

// Already defined above in MobileDemoLayout section
export const ROUTE_MSG_TYPE = 'dumi:update-iframe-route';

HD Scaling Modes

Available scaling modes provided by umi-hd integration:

import vl from 'umi-hd';
import flex from 'umi-hd/lib/flex';
import vh from 'umi-hd/lib/vh';
import vw from 'umi-hd/lib/vw';

// Available HD modes (actual implementation uses 'any' type)
const HD_MODES: any = {
  vl,
  flex,
  vw,
  vh,
};

Configuration

The layout reads configuration from dumi's themeConfig:

// .dumirc.ts
export default {
  themeConfig: {
    hd: {
      rules: [
        {
          mode: 'vw',           // Scaling mode
          options: [100, 750],  // Mode-specific options
          minWidth: 750,        // Optional minimum width
          maxWidth: 1200        // Optional maximum width
        }
      ]
    }
  }
};

Default Configuration: If no HD configuration is provided, the layout uses these defaults:

const defaultHDRules = [{ mode: 'vw', options: [100, 750] }];

Touch Emulation Conditions: Touch emulation is only activated when:

• Target element exists (target.current)
• Browser doesn't have native touch support (!('ontouchstart' in window))
• Applied to document.documentElement to simulate mobile environment

Usage Examples

Basic Usage: The layout is automatically used by dumi when the theme is installed. No manual imports needed.

With Query Parameters:

http://localhost:8000/demo?compact&background=%23f0f0f0

Query parameters supported:

• compact: Removes padding for compact display
• background: Sets custom background color (URL encoded)
• locale: Sets locale for internationalization

Touch Emulation: Touch events are automatically simulated on desktop browsers that don't have native touch support, enabling testing of touch interactions without a physical mobile device.

HD Scaling: The layout automatically applies HD scaling based on:

1. Current viewport width
2. Configured scaling rules
3. Rule matching logic (min/max width constraints)

When a rule matches, the appropriate scaling mode is applied with the specified options, and the data-scale="true" attribute is added to the document element.