Device

Device variables provide information about the user's device hardware, software, and display characteristics. These variables are unique to each device installation and help you optimize your custom blocks for different device types and screen sizes.

Access in App Studio SDK

Tapcart.variables.device

Properties

Property	Type	Description	Availability
`device.id`	string	Unique device identifier (regenerated on app reinstall)	Always
`device.locale`	string	Device locale setting (language_REGION format)	Always
`device.windowHeight`	number	Height of the app window in pixels	Always
`device.tapcartVersion`	string	Version of the Tapcart mobile app framework	Always
`device.operatingSystem`	string	Operating system name (iOS or Android)	Always
`device.osVersion`	string	Operating system version number	Always
`device.version`	string	App version number	Always

Usage Examples

// Check device type
const isIOS = variables.device?.operatingSystem === 'iOS';
const isAndroid = variables.device?.operatingSystem === 'Android';

// Responsive design based on screen height
const isSmallScreen = (variables.device?.windowHeight || 0) < 700;
const containerHeight = isSmallScreen ? '300px' : '400px';

// Version-specific features
const appVersion = variables.device?.version;
const majorVersion = appVersion ? parseInt(appVersion.split('.')[0]) : 0;

// Locale-specific formatting
const userLocale = variables.device?.locale || 'en_US';
const [language, region] = userLocale.split('_');

// Device identification (changes on reinstall)
const deviceId = variables.device?.id;

Device ID Behavior

The device.id is a unique identifier that:

Regenerates when the app is deleted and reinstalled
Persists across app updates and restarts
Is unique to each device installation
Should not be used for permanent user identification

Availability

Device variables are always available and populated with current device information. All properties are guaranteed to have values.

Use Cases

Responsive Design: Adjust layouts based on screen dimensions
Platform-Specific Features: Enable iOS/Android specific functionality
Version Compatibility: Handle features based on app version
Locale Adaptation: Format content for user's language/region
Performance Optimization: Adjust animations/effects for device capabilities
Analytics Tracking: Include device context in custom analytics