https://github.com/metaory/platform-compat-screen
Device-targeted blocking and warning overlays
https://github.com/metaory/platform-compat-screen
compatibility compatible device-detection npm pin platform-detection
Last synced: 3 months ago
JSON representation
Device-targeted blocking and warning overlays
- Host: GitHub
- URL: https://github.com/metaory/platform-compat-screen
- Owner: metaory
- License: mit
- Created: 2025-11-25T13:45:04.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-11-25T14:37:44.000Z (7 months ago)
- Last Synced: 2025-11-28T19:35:17.624Z (7 months ago)
- Topics: compatibility, compatible, device-detection, npm, pin, platform-detection
- Language: CSS
- Homepage: https://metaory.github.io/platform-compat-screen/
- Size: 51.8 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
platform-compat-screen
Device-targeted blocking and warning overlays
A minimal library for showing platform compatibility screens - blocking or warning overlays for mobile/desktop devices.
## Installation
```bash
npm install platform-compat-screen
```
## Usage
### NPM (Source Files)
```javascript
import platformCompatScreen from "platform-compat-screen";
platformCompatScreen({
mode: "block",
target: "mobile",
message: "This application requires a desktop device.",
});
```
### CDN (Unpkg)
```html
```
## API
### `platformCompatScreen(options)`
- `mode` (string): `'block'` | `'warn'` - Blocking or dismissible overlay
- `target` (string): `'mobile'` | `'desktop'` | `'both'` - Device type to target
- `message` (string): Message to display
- `dismissText` (string): Button text for warn mode (default: 'Dismiss')
## CDN Query Parameters
- `mobile=true` - Target mobile devices
- `desktop=true` - Target desktop devices
- `mode=block` | `mode=warn` - Overlay mode
- `message=Your%20message` - Custom message (URL encoded)
## CSS Customization
Override design tokens:
```css
: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;
}
```
## License
[MIT](LICENSE)