Viewport & Device-Aware Rendering
PRISM can render pages with different viewport dimensions based on the requesting device class. This ensures that mobile bots (like Googlebot-Mobile) receive mobile-rendered content while desktop bots receive the desktop layout.
Configuration
[render.viewport]
enabled = true
mobile_width = 412
mobile_height = 915
desktop_width = 1920
desktop_height = 1080
When enabled = false (the default), all renders use a fixed 1920x1080 desktop viewport.
Device Detection
PRISM classifies the User-Agent into two device classes based on these case-insensitive indicators:
| Device Class | User-Agent Indicators |
|---|---|
| Mobile | Mobile, Android, iPhone, iPad, Googlebot-Mobile, smartphone |
| Desktop | Everything else (default) |
Examples:
| User-Agent | Class |
|---|---|
Googlebot/2.1 (+http://www.google.com/bot.html) | Desktop |
Googlebot-Mobile | Mobile |
Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) | Mobile |
GPTBot/1.0 | Desktop |
ClaudeBot/1.0 | Desktop |
Cache Key Separation
When viewport-aware rendering is enabled, the cache key includes a device class suffix:
- Desktop:
https://example.com/products::desktop - Mobile:
https://example.com/products::mobile
This means each page is rendered and cached separately for mobile and desktop, consuming approximately twice the cache memory.
X-Prism-Variant Header
PRISM adds an X-Prism-Variant response header to every rendered response, combining bot detection with device class:
X-Prism-Variant: bot-mobile
The four values are bot-mobile, bot-desktop, human-mobile and human-desktop. With viewport-aware rendering off, the device half is always desktop.
This header serves two purposes:
- Debugging -- quickly identify which variant was served.
- CDN cache keying -- as a cache-key component, for CDNs whose cache keys can read response headers.
:::warning Not a Vary entry
Vary names request headers, and nothing sends X-Prism-Variant — a cache would look for it, never find it, and collapse every variant into one object. See CDN Integration for the arrangement that does work.
:::
Viewport Dimensions
The default viewport dimensions match common device profiles:
| Class | Width | Height | Mobile Flag |
|---|---|---|---|
| Mobile | 412px | 915px | true |
| Desktop | 1920px | 1080px | false |
The mobile flag tells Chrome to emulate a mobile device, which affects CSS media queries (@media (max-width: ...)) and the navigator.userAgent viewport meta behavior.
Viewport dimensions are set on every render to ensure clean state on reused Chrome tabs.