Skip to main content

setDeviceOrientation

Sets the mini-app's screen orientation to portrait ('portrait') or landscape ('landscape'). Use for features that genuinely require a specific orientation — video players, games, maps.

Signature​

import { setDeviceOrientation } from '@apps-in-toss/web-framework';

declare function setDeviceOrientation(options: {
  type: 'portrait' | 'landscape';
}): Promise<void>;

Parameters​

NameTypeRequiredDescription
options.type'portrait' | 'landscape'✓The orientation to lock to. 'portrait' is vertical, 'landscape' is horizontal.

Returns​

  • Promise<void> — resolves once the orientation request is delivered.
  • In the devtools mock, the Viewport tab orientation changes. If the panel has the orientation pinned to a fixed value (not auto), the SDK call is ignored and a warning is logged.

Permission​

No permission required.

Examples​

Minimal​

import { setDeviceOrientation } from '@apps-in-toss/web-framework';

await setDeviceOrientation({ type: 'landscape' });

Realistic — fullscreen video player​

import { setDeviceOrientation } from '@apps-in-toss/web-framework';
import { useEffect } from 'react';

export function FullscreenVideoPlayer() {
  useEffect(() => {
    // Lock to landscape when the video player mounts.
    setDeviceOrientation({ type: 'landscape' });

    return () => {
      // Restore portrait when leaving.
      setDeviceOrientation({ type: 'portrait' });
    };
  }, []);

  return <video src="/sample.mp4" controls />;
}

Try it live​

Open the Navigation page in sdk-example and run the setDeviceOrientation card.

Open in sdk-example

External references​