viewport-playground
Version:
A powerful, isolated viewport testing component for Svelte 5. Test your application's responsiveness in real-time with curated device presets, all within your own development environment.
22 lines (21 loc) • 1.83 kB
JavaScript
// prettier-ignore
export const DEVICES = [
// Mobiles
{ id: 'iphone-se', name: 'iPhone SE', width: 375, height: 667, aspect_ratio: '16:9', type: 'mobile' },
{ id: 'iphone-xr', name: 'iPhone XR', width: 414, height: 896, aspect_ratio: '9:19.5', type: 'mobile' },
{ id: 'iphone-12-pro', name: 'iPhone 12 Pro', width: 390, height: 844, aspect_ratio: '9:19.5', type: 'mobile' },
{ id: 'iphone-14-pro-max', name: 'iPhone 14 Pro Max', width: 430, height: 932, aspect_ratio: '9:19.5', type: 'mobile' },
{ id: 'galaxy-s8', name: 'Samsung Galaxy S8', width: 360, height: 740, aspect_ratio: '18.5:9', type: 'mobile' },
{ id: 'galaxy-s10', name: 'Samsung Galaxy S10', width: 360, height: 760, aspect_ratio: '19:9', type: 'mobile' },
{ id: 'galaxy-s10-plus', name: 'Samsung Galaxy S10+', width: 412, height: 869, aspect_ratio: '19:9', type: 'mobile' },
{ id: 'galaxy-s20', name: 'Samsung Galaxy S20', width: 360, height: 800, aspect_ratio: '20:9', type: 'mobile' },
{ id: 'galaxy-s20-plus', name: 'Samsung Galaxy S20+', width: 384, height: 854, aspect_ratio: '20:9', type: 'mobile' },
{ id: 'galaxy-s20-ultra', name: 'Samsung Galaxy S20 Ultra', width: 412, height: 915, aspect_ratio: '20:9', type: 'mobile' },
{ id: 'pixel-5', name: 'Pixel 5', width: 393, height: 851, aspect_ratio: '19.5:9', type: 'mobile' },
{ id: 'surface-duo', name: 'Surface Duo', width: 540, height: 720, aspect_ratio: '3:4', type: 'mobile' },
// Tablets
{ id: 'ipad-mini', name: 'iPad Mini', width: 768, height: 1024, aspect_ratio: '3:4', type: 'tablet' },
{ id: 'ipad-air', name: 'iPad Air', width: 820, height: 1180, aspect_ratio: '7:10', type: 'tablet' },
{ id: 'ipad-pro', name: 'iPad Pro 12.9"', width: 1024, height: 1366, aspect_ratio: '3:4', type: 'tablet' },
];
export const TOOLBAR_HEIGHT = 50;