Platform Compat Screen

Platform Compat Screen

Device-targeted blocking and warning overlays

Installation

NPM (Source Files)

npm install platform-compat-screen
import platformCompatScreen from 'platform-compat-screen'

CDN (Unpkg)

<link
  rel="stylesheet"
  href="https://unpkg.com/platform-compat-screen@latest/lib/style.css">
<script
  type="module"
  src="https://unpkg.com/platform-compat-screen@latest/lib/cdn.js?mobile=true&mode=block"></script>
Query Parameters:
  • mobile=true - Target mobile devices
  • desktop=true - Target desktop devices
  • mode=block or mode=warn - Overlay mode
  • message=Your%20message - Custom message (URL encoded)

API Reference

platformCompatScreen(options)

// options object:
{
  // Overlay behavior: 'block' shows non-dismissible overlay,
  // 'warn' shows dismissible warning
  // default: 'block'
  mode: 'block' | 'warn'

  // Device type to target. Determines when overlay is shown
  // default: 'mobile'
  target: 'mobile' | 'desktop' | 'both'

  // Message displayed to users
  // default: 'This application is not compatible with your device.'
  message: string

  // Text displayed on dismiss button (only used in 'warn' mode)
  // default: 'Dismiss'
  dismissText: string
}

Interactive Examples

Your device: detecting...

Block Mode (Mobile) 

import platformCompatScreen from 'platform-compat-screen'

platformCompatScreen({
  mode: 'block',
  target: 'mobile',
  message: 'This app requires a desktop device.'
})

Warn Mode (Mobile) 

import platformCompatScreen from 'platform-compat-screen'

platformCompatScreen({
  mode: 'warn',
  target: 'mobile',
  message: 'This app works better on desktop.'
})

Block Mode (Desktop) 

import platformCompatScreen from 'platform-compat-screen'

platformCompatScreen({
  mode: 'block',
  target: 'desktop',
  message: 'This app requires a mobile device.'
})

Warn Mode (Desktop) 

import platformCompatScreen from 'platform-compat-screen'

platformCompatScreen({
  mode: 'warn',
  target: 'desktop',
  message: 'This app works better on mobile.'
})

Custom Message 

import platformCompatScreen from 'platform-compat-screen'

platformCompatScreen({
  mode: 'warn',
  target: 'both',
  message: 'Your device may not be fully supported.'
})

Custom Dismiss Text 

import platformCompatScreen from 'platform-compat-screen'

platformCompatScreen({
  mode: 'warn',
  target: 'both',
  message: 'This app works best on desktop.',
  dismissText: 'Got it'
})

CSS Customization

Override Design Tokens

:root {
  --pcs-bg: rgba(0, 0, 0, 0.6);
  --pcs-bg-blur: 20px;
  --pcs-text: #ffffff;
  --pcs-button-bg: rgba(255, 255, 255, 0.9);
  --pcs-button-text: #000000;
  --pcs-padding: 2rem;
  --pcs-gap: 1.5rem;
  --pcs-font-size: 1.125rem;
  --pcs-title-size: 1.5rem;
  --pcs-title-weight: 600;
  --pcs-border-radius: 1rem;
  --pcs-z-index: 9999;
}