How to Master Large Screen Display Adaptation Solutions

const devicePixelRatio = window.devicePixelRatio;
console.log('Current device pixel ratio:', devicePixelRatio);

class ResponsiveScaler {
  constructor(config = {}) {
    this.designDimensions = {
      width: config.designWidth || 1920,
      height: config.designHeight || 1080
    };
    this.containerSelector = config.containerSelector || '#display-container';
    this.maintainAspectRatio = config.maintainAspectRatio !== false;
    
    this.initialize();
  }

  initialize() {
    this.applyScaling();
    window.addEventListener('resize', this.debounce(this.applyScaling.bind(this), 100));
  }

  applyScaling() {
    const viewportDimensions = {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    };

    const scalingFactors = {
      horizontal: viewportDimensions.width / this.designDimensions.width,
      vertical: viewportDimensions.height / this.designDimensions.height
    };

    const optimalScale = this.maintainAspectRatio 
      ? Math.min(scalingFactors.horizontal, scalingFactors.vertical)
      : Math.max(scalingFactors.horizontal, scalingFactors.vertical);

    const displayContainer = document.querySelector(this.containerSelector);
    if (!displayContainer) return;

    displayContainer.style.transform = `scale(${optimalScale})`;
    displayContainer.style.transformOrigin = 'left top';

    this.centerContainer(displayContainer, viewportDimensions, optimalScale);
  }

  centerContainer(container, viewport, scale) {
    const scaledDimensions = {
      width: this.designDimensions.width * scale,
      height: this.designDimensions.height * scale
    };

    const positioning = {
      left: Math.max(0, (viewport.width - scaledDimensions.width) / 2),
      top: Math.max(0, (viewport.height - scaledDimensions.height) / 2)
    };

    container.style.left = `${positioning.left}px`;
    container.style.top = `${positioning.top}px`;
  }

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }
}

// Initialize with custom configuration
const displayScaler = new ResponsiveScaler({
  designWidth: 1920,
  designHeight: 1080,
  containerSelector: '#main-display',
  maintainAspectRatio: true
});

class RemBasedAdapter {
  constructor(options = {}) {
    this.configuration = {
      designWidth: options.designWidth || 1920,
      baseSize: options.baseSize || 100, // 100px = 1rem
      maxScale: options.maxScale || 2,
      minScale: options.minScale || 0.5,
      breakpoints: options.breakpoints || {
        mobile: 768,
        tablet: 1024,
        desktop: 1440
      }
    };
    
    this.initializeAdapter();
  }

  initializeAdapter() {
    this.calculateRemSize();
    window.addEventListener('resize', this.debounceResize.bind(this));
    window.addEventListener('orientationchange', this.calculateRemSize.bind(this));
  }

  calculateRemSize() {
    const currentViewportWidth = document.documentElement.clientWidth;
    const scalingRatio = currentViewportWidth / this.configuration.designWidth;
    
    // Apply scaling constraints
    const constrainedScale = Math.min(
      Math.max(scalingRatio, this.configuration.minScale),
      this.configuration.maxScale
    );

    const calculatedFontSize = this.configuration.baseSize * constrainedScale;
    
    // Apply responsive breakpoint adjustments
    const adjustedFontSize = this.applyBreakpointAdjustments(
      calculatedFontSize, 
      currentViewportWidth
    );

    document.documentElement.style.fontSize = `${adjustedFontSize}px`;
    
    // Dispatch custom event for other components
    window.dispatchEvent(new CustomEvent('remSizeChanged', {
      detail: { fontSize: adjustedFontSize, scale: constrainedScale }
    }));
  }

  applyBreakpointAdjustments(baseFontSize, viewportWidth) {
    const { breakpoints } = this.configuration;
    
    if (viewportWidth <= breakpoints.mobile) {
      return baseFontSize * 0.9; // Slightly smaller on mobile
    } else if (viewportWidth <= breakpoints.tablet) {
      return baseFontSize * 0.95; // Moderate adjustment for tablets
    }
    
    return baseFontSize; // Full size for desktop and larger
  }

  debounceResize() {
    if (this.resizeTimeout) {
      clearTimeout(this.resizeTimeout);
    }
    
    this.resizeTimeout = setTimeout(() => {
      this.calculateRemSize();
    }, 150);
  }

  // Utility method to convert px to rem
  static pxToRem(pixelValue, baseFontSize = 100) {
    return `${pixelValue / baseFontSize}rem`;
  }
}

// Initialize adapter
const remAdapter = new RemBasedAdapter({
  designWidth: 1920,
  baseSize: 100,
  maxScale: 2.5,
  minScale: 0.3
});

// Example CSS usage with calculated rem values
// .navigation-panel {
//   width: 3.6rem; /* Equivalent to 360px at 1920px design width */
//   height: 2.4rem; /* Equivalent to 240px at 1920px design width */
//   font-size: 0.16rem; /* Equivalent to 16px at 1920px design width */
// }

class ViewportUnitManager {
  constructor(config = {}) {
    this.designSpecs = {
      width: config.designWidth || 1920,
      height: config.designHeight || 1080
    };
    
    this.setupViewportVariables();
    this.handleOrientationChanges();
  }

  setupViewportVariables() {
    const cssVariables = {
      '--design-width': this.designSpecs.width,
      '--design-height': this.designSpecs.height,
      '--vw-unit': `calc(100vw / ${this.designSpecs.width})`,
      '--vh-unit': `calc(100vh / ${this.designSpecs.height})`,
      '--min-unit': 'min(var(--vw-unit), var(--vh-unit))',
      '--max-unit': 'max(var(--vw-unit), var(--vh-unit))'
    };

    const rootElement = document.documentElement;
    Object.entries(cssVariables).forEach(([property, value]) => {
      rootElement.style.setProperty(property, value);
    });
  }

  handleOrientationChanges() {
    window.addEventListener('orientationchange', () => {
      setTimeout(() => {
        this.setupViewportVariables();
        this.updateViewportMetrics();
      }, 100);
    });

    window.addEventListener('resize', this.debounce(() => {
      this.updateViewportMetrics();
    }, 200));
  }

  updateViewportMetrics() {
    const currentDimensions = {
      width: window.innerWidth,
      height: window.innerHeight,
      aspectRatio: window.innerWidth / window.innerHeight
    };

    document.documentElement.style.setProperty(
      '--current-aspect-ratio', 
      currentDimensions.aspectRatio
    );

    // Dispatch update event
    window.dispatchEvent(new CustomEvent('viewportUpdated', {
      detail: currentDimensions
    }));
  }

  // Utility method to convert design pixels to viewport units
  static toViewportWidth(pixelValue, designWidth = 1920) {
    return `calc(${pixelValue} * var(--vw-unit))`;
  }

  static toViewportHeight(pixelValue, designHeight = 1080) {
    return `calc(${pixelValue} * var(--vh-unit))`;
  }

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }
}

// Initialize viewport manager
const viewportManager = new ViewportUnitManager({
  designWidth: 1920,
  designHeight: 1080
});

.responsive-container {
  width: 100vw;
  height: 100vh;
}

.adaptive-panel {
  width: 50vw; /* 50% of viewport width */
  height: 30vh; /* 30% of viewport height */
  font-size: 2vmin; /* 2% of smaller viewport dimension */
}

/* Using CSS variables for precise control */
.design-based-element {
  width: calc(360 * var(--vw-unit)); /* 360px in original design */
  height: calc(240 * var(--vh-unit)); /* 240px in original design */
  margin: calc(20 * var(--min-unit)); /* Responsive margin */
}

/* Responsive typography with constraints */
.adaptive-text {
  font-size: clamp(
    calc(12 * var(--min-unit)), 
    calc(16 * var(--vw-unit)), 
    calc(24 * var(--min-unit))
  );
}

class AdvancedScalingManager {
  constructor(options = {}) {
    this.config = {
      designWidth: options.designWidth || 1920,
      designHeight: options.designHeight || 1080,
      containerSelector: options.containerSelector || '#scaling-container',
      defaultMode: options.defaultMode || 'proportional-width',
      ...options
    };

    this.currentMode = this.config.defaultMode;
    this.container = document.querySelector(this.config.containerSelector);
    
    this.initialize();
  }

  initialize() {
    this.createModeControls();
    this.applyScalingMode(this.currentMode);
    window.addEventListener('resize', this.debounce(this.handleResize.bind(this), 150));
  }

  createModeControls() {
    const controlPanel = document.createElement('div');
    controlPanel.className = 'scaling-controls';
    controlPanel.innerHTML = `
      <button data-mode="full-screen">Full Screen</button>
      <button data-mode="proportional-width">Width-First</button>
      <button data-mode="proportional-height">Height-First</button>
      <button data-mode="height-with-scroll">Height + Scroll</button>
      <button data-mode="fixed-size">No Scaling</button>
    `;

    controlPanel.addEventListener('click', (event) => {
      if (event.target.dataset.mode) {
        this.setScalingMode(event.target.dataset.mode);
      }
    });

    document.body.appendChild(controlPanel);
  }

  setScalingMode(mode) {
    this.currentMode = mode;
    this.applyScalingMode(mode);
    
    // Update active button state
    document.querySelectorAll('.scaling-controls button').forEach(btn => {
      btn.classList.toggle('active', btn.dataset.mode === mode);
    });
  }

  applyScalingMode(mode) {
    if (!this.container) return;

    const viewport = {
      width: window.innerWidth,
      height: window.innerHeight
    };

    const scalingFactors = {
      x: viewport.width / this.config.designWidth,
      y: viewport.height / this.config.designHeight
    };

    // Reset styles
    this.resetContainerStyles();

    switch (mode) {
      case 'full-screen':
        this.applyFullScreenMode(scalingFactors);
        break;
      case 'proportional-width':
        this.applyProportionalWidthMode(scalingFactors);
        break;
      case 'proportional-height':
        this.applyProportionalHeightMode(scalingFactors);
        break;
      case 'height-with-scroll':
        this.applyHeightWithScrollMode(scalingFactors);
        break;
      case 'fixed-size':
        this.applyFixedSizeMode();
        break;
    }

    // Dispatch mode change event
    this.dispatchModeChangeEvent(mode, scalingFactors);
  }

  applyFullScreenMode(factors) {
    Object.assign(this.container.style, {
      transform: `scale(${factors.x}, ${factors.y})`,
      transformOrigin: 'top left',
      width: `${this.config.designWidth}px`,
      height: `${this.config.designHeight}px`
    });
    
    document.body.style.overflow = 'hidden';
  }

  applyProportionalWidthMode(factors) {
    const uniformScale = factors.x;
    Object.assign(this.container.style, {
      transform: `scale(${uniformScale})`,
      transformOrigin: 'top left',
      width: `${this.config.designWidth}px`,
      height: `${this.config.designHeight}px`
    });
    
    document.body.style.overflow = 'auto';
  }

  applyProportionalHeightMode(factors) {
    const uniformScale = factors.y;
    Object.assign(this.container.style, {
      transform: `scale(${uniformScale})`,
      transformOrigin: 'top left',
      width: `${this.config.designWidth}px`,
      height: `${this.config.designHeight}px`
    });
    
    document.body.style.overflow = 'auto';
  }

  applyHeightWithScrollMode(factors) {
    const heightScale = factors.y;
    Object.assign(this.container.style, {
      transform: `scale(${heightScale})`,
      transformOrigin: 'top left',
      width: `${this.config.designWidth}px`,
      height: `${this.config.designHeight}px`
    });
    
    document.body.style.overflowX = 'auto';
    document.body.style.overflowY = 'hidden';
  }

  applyFixedSizeMode() {
    Object.assign(this.container.style, {
      transform: 'none',
      width: `${this.config.designWidth}px`,
      height: `${this.config.designHeight}px`
    });
    
    document.body.style.overflow = 'auto';
  }

  resetContainerStyles() {
    const stylesToReset = [
      'transform', 'transformOrigin', 'width', 'height', 
      'left', 'top', 'position'
    ];
    
    stylesToReset.forEach(property => {
      this.container.style[property] = '';
    });
    
    document.body.style.overflow = '';
    document.body.style.overflowX = '';
    document.body.style.overflowY = '';
  }

  handleResize() {
    this.applyScalingMode(this.currentMode);
  }

  dispatchModeChangeEvent(mode, factors) {
    const event = new CustomEvent('scalingModeChanged', {
      detail: {
        mode,
        scalingFactors: factors,
        timestamp: Date.now()
      }
    });
    
    window.dispatchEvent(event);
  }

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  // Public API methods
  getCurrentMode() {
    return this.currentMode;
  }

  getScalingInfo() {
    const viewport = {
      width: window.innerWidth,
      height: window.innerHeight
    };

    return {
      mode: this.currentMode,
      designDimensions: { ...this.config.designWidth, ...this.config.designHeight },
      currentViewport: viewport,
      scalingFactors: {
        x: viewport.width / this.config.designWidth,
        y: viewport.height / this.config.designHeight
      }
    };
  }
}

// Initialize with comprehensive configuration
const scalingManager = new AdvancedScalingManager({
  designWidth: 1920,
  designHeight: 1080,
  containerSelector: '#main-display',
  defaultMode: 'proportional-width'
});

class CanvasScalingEngine {
  constructor(options = {}) {
    this.config = {
      canvasSelector: options.canvasSelector || '#canvas-container',
      designWidth: options.designWidth || 1920,
      designHeight: options.designHeight || 1080,
      minZoom: options.minZoom || 0.1,
      maxZoom: options.maxZoom || 3.0,
      zoomStep: options.zoomStep || 0.1,
      autoFit: options.autoFit !== false,
      ...options
    };

    this.currentZoom = 1.0;
    this.panOffset = { x: 0, y: 0 };
    this.isDragging = false;
    this.lastMousePosition = { x: 0, y: 0 };

    this.initialize();
  }

  initialize() {
    this.canvas = document.querySelector(this.config.canvasSelector);
    if (!this.canvas) {
      throw new Error(`Canvas element not found: ${this.config.canvasSelector}`);
    }

    this.setupCanvasStructure();
    this.attachEventListeners();
    
    if (this.config.autoFit) {
      this.fitToWindow();
    }
  }

  setupCanvasStructure() {
    // Create nested structure for proper scaling
    this.canvas.style.cssText = `
      width: ${this.config.designWidth}px;
      height: ${this.config.designHeight}px;
      transform-origin: top left;
      position: absolute;
      top: 0;
      left: 0;
    `;

    // Ensure parent container exists
    if (!this.canvas.parentElement.classList.contains('canvas-viewport')) {
      const viewport = document.createElement('div');
      viewport.className = 'canvas-viewport';
      viewport.style.cssText = `
        width: 100%;
        height: 100%;
        overflow: auto;
        position: relative;
        cursor: grab;
      `;
      
      this.canvas.parentNode.insertBefore(viewport, this.canvas);
      viewport.appendChild(this.canvas);
      this.viewport = viewport;
    } else {
      this.viewport = this.canvas.parentElement;
    }
  }

  attachEventListeners() {
    // Zoom controls
    this.viewport.addEventListener('wheel', this.handleWheel.bind(this));
    
    // Pan controls
    this.viewport.addEventListener('mousedown', this.handleMouseDown.bind(this));
    this.viewport.addEventListener('mousemove', this.handleMouseMove.bind(this));
    this.viewport.addEventListener('mouseup', this.handleMouseUp.bind(this));
    this.viewport.addEventListener('mouseleave', this.handleMouseUp.bind(this));

    // Window resize
    window.addEventListener('resize', this.debounce(this.handleResize.bind(this), 200));

    // Keyboard shortcuts
    document.addEventListener('keydown', this.handleKeyboard.bind(this));
  }

  handleWheel(event) {
    event.preventDefault();
    
    const zoomDelta = event.deltaY > 0 ? -this.config.zoomStep : this.config.zoomStep;
    const newZoom = this.constrainZoom(this.currentZoom + zoomDelta);
    
    if (newZoom !== this.currentZoom) {
      const rect = this.viewport.getBoundingClientRect();
      const centerX = event.clientX - rect.left;
      const centerY = event.clientY - rect.top;
      
      this.zoomToPoint(newZoom, centerX, centerY);
    }
  }

  handleMouseDown(event) {
    if (event.button === 0) { // Left mouse button
      this.isDragging = true;
      this.lastMousePosition = { x: event.clientX, y: event.clientY };
      this.viewport.style.cursor = 'grabbing';
      event.preventDefault();
    }
  }

  handleMouseMove(event) {
    if (this.isDragging) {
      const deltaX = event.clientX - this.lastMousePosition.x;
      const deltaY = event.clientY - this.lastMousePosition.y;
      
      this.panOffset.x += deltaX;
      this.panOffset.y += deltaY;
      
      this.updateTransform();
      
      this.lastMousePosition = { x: event.clientX, y: event.clientY };
    }
  }

  handleMouseUp() {
    this.isDragging = false;
    this.viewport.style.cursor = 'grab';
  }

  handleKeyboard(event) {
    if (event.ctrlKey || event.metaKey) {
      switch (event.key) {
        case '0':
          event.preventDefault();
          this.resetZoom();
          break;
        case '=':
        case '+':
          event.preventDefault();
          this.zoomIn();
          break;
        case '-':
          event.preventDefault();
          this.zoomOut();
          break;
        case '1':
          event.preventDefault();
          this.fitToWindow();
          break;
      }
    }
  }

  handleResize() {
    if (this.config.autoFit) {
      this.fitToWindow();
    }
  }

  zoomToPoint(newZoom, pointX, pointY) {
    const oldZoom = this.currentZoom;
    const zoomRatio = newZoom / oldZoom;
    
    // Adjust pan offset to zoom towards the specified point
    this.panOffset.x = pointX - (pointX - this.panOffset.x) * zoomRatio;
    this.panOffset.y = pointY - (pointY - this.panOffset.y) * zoomRatio;
    
    this.currentZoom = newZoom;
    this.updateTransform();
    this.dispatchZoomEvent();
  }

  setZoom(zoomLevel, animate = false) {
    const newZoom = this.constrainZoom(zoomLevel);
    
    if (animate) {
      this.animateZoom(this.currentZoom, newZoom);
    } else {
      this.currentZoom = newZoom;
      this.updateTransform();
      this.dispatchZoomEvent();
    }
  }

  zoomIn() {
    this.setZoom(this.currentZoom + this.config.zoomStep);
  }

  zoomOut() {
    this.setZoom(this.currentZoom - this.config.zoomStep);
  }

  resetZoom() {
    this.currentZoom = 1.0;
    this.panOffset = { x: 0, y: 0 };
    this.updateTransform();
    this.dispatchZoomEvent();
  }

  fitToWindow() {
    const viewportRect = this.viewport.getBoundingClientRect();
    const padding = 40; // Padding around canvas
    
    const availableWidth = viewportRect.width - padding * 2;
    const availableHeight = viewportRect.height - padding * 2;
    
    const scaleX = availableWidth / this.config.designWidth;
    const scaleY = availableHeight / this.config.designHeight;
    
    const optimalZoom = this.constrainZoom(Math.min(scaleX, scaleY));
    
    // Center the canvas
    const scaledWidth = this.config.designWidth * optimalZoom;
    const scaledHeight = this.config.designHeight * optimalZoom;
    
    this.panOffset.x = (viewportRect.width - scaledWidth) / 2;
    this.panOffset.y = (viewportRect.height - scaledHeight) / 2;
    
    this.currentZoom = optimalZoom;
    this.updateTransform();
    this.dispatchZoomEvent();
  }

  constrainZoom(zoom) {
    return Math.min(Math.max(zoom, this.config.minZoom), this.config.maxZoom);
  }

  updateTransform() {
    const transform = `translate(${this.panOffset.x}px, ${this.panOffset.y}px) scale(${this.currentZoom})`;
    this.canvas.style.transform = transform;
  }

  animateZoom(fromZoom, toZoom, duration = 300) {
    const startTime = performance.now();
    const zoomDifference = toZoom - fromZoom;
    
    const animate = (currentTime) => {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      
      // Easing function (ease-out)
      const easeOut = 1 - Math.pow(1 - progress, 3);
      
      this.currentZoom = fromZoom + (zoomDifference * easeOut);
      this.updateTransform();
      
      if (progress < 1) {
        requestAnimationFrame(animate);
      } else {
        this.dispatchZoomEvent();
      }
    };
    
    requestAnimationFrame(animate);
  }

  dispatchZoomEvent() {
    const event = new CustomEvent('canvasZoomChanged', {
      detail: {
        zoom: this.currentZoom,
        panOffset: { ...this.panOffset },
        canvasBounds: this.getCanvasBounds()
      }
    });
    
    this.canvas.dispatchEvent(event);
  }

  getCanvasBounds() {
    const scaledWidth = this.config.designWidth * this.currentZoom;
    const scaledHeight = this.config.designHeight * this.currentZoom;
    
    return {
      left: this.panOffset.x,
      top: this.panOffset.y,
      right: this.panOffset.x + scaledWidth,
      bottom: this.panOffset.y + scaledHeight,
      width: scaledWidth,
      height: scaledHeight
    };
  }

  // Coordinate conversion utilities
  screenToCanvas(screenX, screenY) {
    const rect = this.viewport.getBoundingClientRect();
    const viewportX = screenX - rect.left;
    const viewportY = screenY - rect.top;
    
    const canvasX = (viewportX - this.panOffset.x) / this.currentZoom;
    const canvasY = (viewportY - this.panOffset.y) / this.currentZoom;
    
    return { x: canvasX, y: canvasY };
  }

  canvasToScreen(canvasX, canvasY) {
    const rect = this.viewport.getBoundingClientRect();
    
    const viewportX = canvasX * this.currentZoom + this.panOffset.x;
    const viewportY = canvasY * this.currentZoom + this.panOffset.y;
    
    const screenX = viewportX + rect.left;
    const screenY = viewportY + rect.top;
    
    return { x: screenX, y: screenY };
  }

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  // Public API
  getZoomLevel() {
    return this.currentZoom;
  }

  getPanOffset() {
    return { ...this.panOffset };
  }

  destroy() {
    this.viewport.removeEventListener('wheel', this.handleWheel);
    this.viewport.removeEventListener('mousedown', this.handleMouseDown);
    this.viewport.removeEventListener('mousemove', this.handleMouseMove);
    this.viewport.removeEventListener('mouseup', this.handleMouseUp);
    this.viewport.removeEventListener('mouseleave', this.handleMouseUp);
    window.removeEventListener('resize', this.handleResize);
    document.removeEventListener('keydown', this.handleKeyboard);
  }
}

// Initialize canvas scaling engine
const canvasEngine = new CanvasScalingEngine({
  canvasSelector: '#design-canvas',
  designWidth: 1920,
  designHeight: 1080,
  minZoom: 0.1,
  maxZoom: 5.0,
  autoFit: true
});

class HighDPRCanvasManager {
  constructor(canvasElement, options = {}) {
    this.canvas = canvasElement;
    this.context = null;
    this.config = {
      autoScale: options.autoScale !== false,
      maxDPR: options.maxDPR || 3,
      ...options
    };
    
    this.initialize();
  }

  initialize() {
    this.setupHighDPRCanvas();
    this.setupImageHandling();
    window.addEventListener('resize', this.handleResize.bind(this));
  }

  setupHighDPRCanvas() {
    const devicePixelRatio = Math.min(
      window.devicePixelRatio || 1, 
      this.config.maxDPR
    );
    
    const rect = this.canvas.getBoundingClientRect();
    const displayWidth = rect.width;
    const displayHeight = rect.height;

    // Set actual canvas size in memory (scaled up)
    this.canvas.width = displayWidth * devicePixelRatio;
    this.canvas.height = displayHeight * devicePixelRatio;

    // Scale canvas back down using CSS
    this.canvas.style.width = `${displayWidth}px`;
    this.canvas.style.height = `${displayHeight}px`;

    // Scale the drawing context to match device pixel ratio
    this.context = this.canvas.getContext('2d');
    this.context.scale(devicePixelRatio, devicePixelRatio);

    return { devicePixelRatio, displayWidth, displayHeight };
  }

  setupImageHandling() {
    // Create responsive image loading utility
    this.imageLoader = {
      loadResponsiveImage: (imagePath, callback) => {
        const devicePixelRatio = window.devicePixelRatio || 1;
        const img = new Image();
        
        // Generate appropriate image URL based on DPR
        const responsiveImagePath = this.generateResponsiveImagePath(
          imagePath, 
          devicePixelRatio
        );
        
        img.onload = () => callback(img);
        img.onerror = () => {
          // Fallback to original image if high-DPR version fails
          const fallbackImg = new Image();
          fallbackImg.onload = () => callback(fallbackImg);
          fallbackImg.src = imagePath;
        };
        
        img.src = responsiveImagePath;
      }
    };
  }

  generateResponsiveImagePath(originalPath, devicePixelRatio) {
    const pathParts = originalPath.split('.');
    const extension = pathParts.pop();
    const basePath = pathParts.join('.');
    
    if (devicePixelRatio >= 3) {
      return `${basePath}@3x.${extension}`;
    } else if (devicePixelRatio >= 2) {
      return `${basePath}@2x.${extension}`;
    }
    
    return originalPath; // Use original for 1x displays
  }

  handleResize() {
    if (this.config.autoScale) {
      this.setupHighDPRCanvas();
    }
  }

  getContext() {
    return this.context;
  }
}

// Enhanced responsive image component
class ResponsiveImageComponent {
  static createResponsiveImageElement(src, alt = '', className = '') {
    const img = document.createElement('img');
    const basePath = src.replace(/\.[^/.]+$/, '');
    const extension = src.split('.').pop();
    
    // Generate srcset for different DPR values
    const srcset = [
      `${src} 1x`,
      `${basePath}@2x.${extension} 2x`,
      `${basePath}@3x.${extension} 3x`
    ].join(', ');
    
    img.src = src;
    img.srcset = srcset;
    img.alt = alt;
    img.className = className;
    img.loading = 'lazy'; // Performance optimization
    
    return img;
  }
}

class AdaptiveFontManager {
  constructor(options = {}) {
    this.config = {
      baseSize: options.baseSize || 16,
      minSize: options.minSize || 12,
      maxSize: options.maxSize || 32,
      scalingFactor: options.scalingFactor || 1.2,
      breakpoints: options.breakpoints || {
        small: 768,
        medium: 1024,
        large: 1440,
        xlarge: 1920
      },
      ...options
    };
    
    this.initialize();
  }

  initialize() {
    this.setupFontVariables();
    this.applyResponsiveFonts();
    window.addEventListener('resize', this.debounce(this.updateFontSizes.bind(this), 150));
  }

  setupFontVariables() {
    const viewportWidth = window.innerWidth;
    const scalingRatio = this.calculateScalingRatio(viewportWidth);
    
    const fontSizes = {
      'font-xs': this.constrainFontSize(this.config.baseSize * 0.75 * scalingRatio),
      'font-sm': this.constrainFontSize(this.config.baseSize * 0.875 * scalingRatio),
      'font-base': this.constrainFontSize(this.config.baseSize * scalingRatio),
      'font-lg': this.constrainFontSize(this.config.baseSize * 1.125 * scalingRatio),
      'font-xl': this.constrainFontSize(this.config.baseSize * 1.25 * scalingRatio),
      'font-2xl': this.constrainFontSize(this.config.baseSize * 1.5 * scalingRatio),
      'font-3xl': this.constrainFontSize(this.config.baseSize * 1.875 * scalingRatio),
      'font-4xl': this.constrainFontSize(this.config.baseSize * 2.25 * scalingRatio)
    };

    // Apply CSS custom properties
    const rootElement = document.documentElement;
    Object.entries(fontSizes).forEach(([property, size]) => {
      rootElement.style.setProperty(`--${property}`, `${size}px`);
    });
  }

  calculateScalingRatio(viewportWidth) {
    const { breakpoints } = this.config;
    
    if (viewportWidth <= breakpoints.small) {
      return 0.9; // Smaller fonts on mobile
    } else if (viewportWidth <= breakpoints.medium) {
      return 0.95; // Slightly smaller on tablets
    } else if (viewportWidth <= breakpoints.large) {
      return 1.0; // Base size for desktop
    } else if (viewportWidth <= breakpoints.xlarge) {
      return 1.1; // Larger fonts for large screens
    } else {
      return 1.2; // Maximum scaling for very large screens
    }
  }

  constrainFontSize(size) {
    return Math.min(Math.max(size, this.config.minSize), this.config.maxSize);
  }

  applyResponsiveFonts() {
    // Inject adaptive font CSS
    const adaptiveFontCSS = `
      .adaptive-text {
        font-size: clamp(
          var(--font-sm), 
          calc(var(--font-base) + 0.5vw), 
          var(--font-xl)
        );
        line-height: 1.6;
      }
      
      .adaptive-heading-1 {
        font-size: clamp(
          var(--font-2xl), 
          calc(var(--font-3xl) + 1vw), 
          var(--font-4xl)
        );
        line-height: 1.2;
      }
      
      .adaptive-heading-2 {
        font-size: clamp(
          var(--font-xl), 
          calc(var(--font-2xl) + 0.5vw), 
          var(--font-3xl)
        );
        line-height: 1.3;
      }
      
      .adaptive-caption {
        font-size: clamp(
          var(--font-xs), 
          calc(var(--font-sm) + 0.2vw), 
          var(--font-base)
        );
        line-height: 1.4;
      }
    `;
    
    this.injectCSS(adaptiveFontCSS, 'adaptive-fonts');
  }

  updateFontSizes() {
    this.setupFontVariables();
  }

  injectCSS(cssContent, id) {
    let styleElement = document.getElementById(id);
    
    if (!styleElement) {
      styleElement = document.createElement('style');
      styleElement.id = id;
      document.head.appendChild(styleElement);
    }
    
    styleElement.textContent = cssContent;
  }

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }
}

// Initialize adaptive font manager
const fontManager = new AdaptiveFontManager({
  baseSize: 16,
  minSize: 10,
  maxSize: 40,
  breakpoints: {
    small: 768,
    medium: 1024,
    large: 1440,
    xlarge: 1920
  }
});

class InteractionManager {
  constructor(scaledContainer, options = {}) {
    this.container = scaledContainer;
    this.config = {
      enableVirtualScrolling: options.enableVirtualScrolling !== false,
      scrollSensitivity: options.scrollSensitivity || 1,
      clickTolerance: options.clickTolerance || 5,
      ...options
    };
    
    this.currentScale = 1;
    this.isMouseDown = false;
    this.mouseDownPosition = { x: 0, y: 0 };
    
    this.initialize();
  }

  initialize() {
    this.attachEventListeners();
    this.observeScaleChanges();
  }

  attachEventListeners() {
    // Mouse event handling with coordinate transformation
    this.container.addEventListener('mousedown', this.handleMouseDown.bind(this));
    this.container.addEventListener('mousemove', this.handleMouseMove.bind(this));
    this.container.addEventListener('mouseup', this.handleMouseUp.bind(this));
    this.container.addEventListener('click', this.handleClick.bind(this));
    
    // Touch event handling for mobile devices
    this.container.addEventListener('touchstart', this.handleTouchStart.bind(this));
    this.container.addEventListener('touchmove', this.handleTouchMove.bind(this));
    this.container.addEventListener('touchend', this.handleTouchEnd.bind(this));
    
    // Scroll event handling
    if (this.config.enableVirtualScrolling) {
      this.container.addEventListener('wheel', this.handleWheel.bind(this));
    }
  }

  observeScaleChanges() {
    // Use MutationObserver to detect transform changes
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
          this.updateCurrentScale();
        }
      });
    });

    observer.observe(this.container, {
      attributes: true,
      attributeFilter: ['style']
    });

    // Initial scale detection
    this.updateCurrentScale();
  }

  updateCurrentScale() {
    const computedStyle = window.getComputedStyle(this.container);
    const transform = computedStyle.transform;
    
    if (transform && transform !== 'none') {
      const matrix = new DOMMatrix(transform);
      this.currentScale = matrix.a; // Horizontal scale factor
    } else {
      this.currentScale = 1;
    }
  }

  transformCoordinates(clientX, clientY) {
    const containerRect = this.container.getBoundingClientRect();
    
    // Calculate relative position within container
    const relativeX = clientX - containerRect.left;
    const relativeY = clientY - containerRect.top;
    
    // Apply inverse scaling transformation
    const transformedX = relativeX / this.currentScale;
    const transformedY = relativeY / this.currentScale;
    
    return {
      x: transformedX,
      y: transformedY,
      originalX: relativeX,
      originalY: relativeY,
      scale: this.currentScale
    };
  }

  handleMouseDown(event) {
    this.isMouseDown = true;
    this.mouseDownPosition = { x: event.clientX, y: event.clientY };
    
    const transformedCoords = this.transformCoordinates(event.clientX, event.clientY);
    
    // Dispatch custom event with transformed coordinates
    this.dispatchTransformedEvent('scaledMouseDown', event, transformedCoords);
  }

  handleMouseMove(event) {
    const transformedCoords = this.transformCoordinates(event.clientX, event.clientY);
    
    // Calculate movement delta with scale compensation
    if (this.isMouseDown) {
      const deltaX = (event.clientX - this.mouseDownPosition.x) / this.currentScale;
      const deltaY = (event.clientY - this.mouseDownPosition.y) / this.currentScale;
      
      transformedCoords.deltaX = deltaX;
      transformedCoords.deltaY = deltaY;
    }
    
    this.dispatchTransformedEvent('scaledMouseMove', event, transformedCoords);
  }

  handleMouseUp(event) {
    const transformedCoords = this.transformCoordinates(event.clientX, event.clientY);
    
    // Check if this was a drag or click based on movement distance
    const moveDistance = Math.sqrt(
      Math.pow(event.clientX - this.mouseDownPosition.x, 2) +
      Math.pow(event.clientY - this.mouseDownPosition.y, 2)
    );
    
    transformedCoords.isDrag = moveDistance > this.config.clickTolerance;
    
    this.isMouseDown = false;
    this.dispatchTransformedEvent('scaledMouseUp', event, transformedCoords);
  }

  handleClick(event) {
    // Prevent click if it was a drag operation
    const moveDistance = Math.sqrt(
      Math.pow(event.clientX - this.mouseDownPosition.x, 2) +
      Math.pow(event.clientY - this.mouseDownPosition.y, 2)
    );
    
    if (moveDistance > this.config.clickTolerance) {
      event.preventDefault();
      event.stopPropagation();
      return;
    }
    
    const transformedCoords = this.transformCoordinates(event.clientX, event.clientY);
    
    // Find the actual element at the transformed coordinates
    const elementAtPoint = this.getElementAtScaledPosition(
      transformedCoords.x, 
      transformedCoords.y
    );
    
    transformedCoords.targetElement = elementAtPoint;
    
    this.dispatchTransformedEvent('scaledClick', event, transformedCoords);
  }

  handleWheel(event) {
    event.preventDefault();
    
    const transformedCoords = this.transformCoordinates(event.clientX, event.clientY);
    
    // Adjust wheel delta based on scale for consistent scrolling speed
    const adjustedDeltaX = event.deltaX * this.config.scrollSensitivity / this.currentScale;
    const adjustedDeltaY = event.deltaY * this.config.scrollSensitivity / this.currentScale;
    
    transformedCoords.adjustedDeltaX = adjustedDeltaX;
    transformedCoords.adjustedDeltaY = adjustedDeltaY;
    transformedCoords.originalDeltaX = event.deltaX;
    transformedCoords.originalDeltaY = event.deltaY;
    
    this.dispatchTransformedEvent('scaledWheel', event, transformedCoords);
  }

  // Touch event handlers for mobile support
  handleTouchStart(event) {
    if (event.touches.length === 1) {
      const touch = event.touches[0];
      const transformedCoords = this.transformCoordinates(touch.clientX, touch.clientY);
      
      this.dispatchTransformedEvent('scaledTouchStart', event, transformedCoords);
    }
  }

  handleTouchMove(event) {
    if (event.touches.length === 1) {
      const touch = event.touches[0];
      const transformedCoords = this.transformCoordinates(touch.clientX, touch.clientY);
      
      this.dispatchTransformedEvent('scaledTouchMove', event, transformedCoords);
    }
  }

  handleTouchEnd(event) {
    const transformedCoords = this.transformCoordinates(
      event.changedTouches[0].clientX, 
      event.changedTouches[0].clientY
    );
    
    this.dispatchTransformedEvent('scaledTouchEnd', event, transformedCoords);
  }

  getElementAtScaledPosition(scaledX, scaledY) {
    // Temporarily remove pointer events to avoid interference
    const originalPointerEvents = this.container.style.pointerEvents;
    this.container.style.pointerEvents = 'none';
    
    // Convert scaled coordinates back to screen coordinates
    const containerRect = this.container.getBoundingClientRect();
    const screenX = containerRect.left + (scaledX * this.currentScale);
    const screenY = containerRect.top + (scaledY * this.currentScale);
    
    const element = document.elementFromPoint(screenX, screenY);
    
    // Restore pointer events
    this.container.style.pointerEvents = originalPointerEvents;
    
    return element;
  }

  dispatchTransformedEvent(eventType, originalEvent, transformedCoords) {
    const customEvent = new CustomEvent(eventType, {
      detail: {
        originalEvent,
        transformedCoords,
        scale: this.currentScale,
        timestamp: Date.now()
      },
      bubbles: true,
      cancelable: true
    });
    
    this.container.dispatchEvent(customEvent);
  }

  // Public API
  getScale() {
    return this.currentScale;
  }

  setScrollSensitivity(sensitivity) {
    this.config.scrollSensitivity = sensitivity;
  }

  destroy() {
    // Remove all event listeners
    const events = [
      'mousedown', 'mousemove', 'mouseup', 'click',
      'touchstart', 'touchmove', 'touchend', 'wheel'
    ];
    
    events.forEach(eventType => {
      this.container.removeEventListener(eventType, this[`handle${eventType.charAt(0).toUpperCase() + eventType.slice(1)}`]);
    });
  }
}

// Usage example
const scaledContainer = document.querySelector('#scaled-display');
const interactionManager = new InteractionManager(scaledContainer, {
  enableVirtualScrolling: true,
  scrollSensitivity: 1.2,
  clickTolerance: 8
});

// Listen for transformed events
scaledContainer.addEventListener('scaledClick', (event) => {
  const { transformedCoords } = event.detail;
  console.log('Clicked at scaled position:', transformedCoords.x, transformedCoords.y);
  console.log('Target element:', transformedCoords.targetElement);
});

class UnifiedAdaptationSystem {
  constructor(options = {}) {
    this.config = {
      primaryMethod: options.primaryMethod || 'scale', // 'scale', 'rem', 'viewport'
      fallbackMethod: options.fallbackMethod || 'viewport',
      designWidth: options.designWidth || 1920,
      designHeight: options.designHeight || 1080,
      containerSelector: options.containerSelector || '#app-container',
      enableInteractions: options.enableInteractions !== false,
      autoDetect: options.autoDetect !== false,
      ...options
    };

    this.activeAdapter = null;
    this.interactionManager = null;
    
    this.initialize();
  }

  initialize() {
    if (this.config.autoDetect) {
      this.detectOptimalMethod();
    }
    
    this.setupAdapter(this.config.primaryMethod);
    this.setupMonitoring();
  }

  detectOptimalMethod() {
    const deviceInfo = this.analyzeDevice();
    
    if (deviceInfo.isFixedDisplay) {
      this.config.primaryMethod = 'scale';
    } else if (deviceInfo.hasVariableWidth) {
      this.config.primaryMethod = 'viewport';
    } else if (deviceInfo.requiresPreciseScaling) {
      this.config.primaryMethod = 'rem';
    }
    
    console.log('Auto-detected optimal method:', this.config.primaryMethod);
  }

  analyzeDevice() {
    const userAgent = navigator.userAgent.toLowerCase();
    const screenRatio = window.screen.width / window.screen.height;
    const isTouch = 'ontouchstart' in window;
    
    return {
      isFixedDisplay: !isTouch && (screenRatio === 16/9 || screenRatio === 16/10),
      hasVariableWidth: isTouch || window.innerWidth < 1024,
      requiresPreciseScaling: window.devicePixelRatio > 2,
      isMobile: isTouch && window.innerWidth < 768,
      isTablet: isTouch && window.innerWidth >= 768 && window.innerWidth < 1024
    };
  }

  setupAdapter(method) {
    // Clean up previous adapter
    if (this.activeAdapter && this.activeAdapter.destroy) {
      this.activeAdapter.destroy();
    }

    switch (method) {
      case 'scale':
        this.activeAdapter = new ResponsiveScaler({
          designWidth: this.config.designWidth,
          designHeight: this.config.designHeight,
          containerSelector: this.config.containerSelector
        });
        break;
        
      case 'rem':
        this.activeAdapter = new RemBasedAdapter({
          designWidth: this.config.designWidth,
          baseSize: 100
        });
        break;
        
      case 'viewport':
        this.activeAdapter = new ViewportUnitManager({
          designWidth: this.config.designWidth,
          designHeight: this.config.designHeight
        });
        break;
        
      default:
        console.warn('Unknown adaptation method:', method);
        this.setupAdapter(this.config.fallbackMethod);
        return;
    }

    // Setup interaction management if enabled
    if (this.config.enableInteractions) {
      const container = document.querySelector(this.config.containerSelector);
      if (container) {
        this.interactionManager = new InteractionManager(container);
      }
    }

    console.log('Initialized adapter:', method);
  }

  setupMonitoring() {
    // Monitor performance and switch methods if needed
    let performanceIssues = 0;
    
    const performanceObserver = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      entries.forEach(entry => {
        if (entry.duration > 16.67) { // More than one frame (60fps)
          performanceIssues++;
          
          if (performanceIssues > 10) {
            this.handlePerformanceIssues();
            performanceIssues = 0;
          }
        }
      });
    });

    if ('PerformanceObserver' in window) {
      performanceObserver.observe({ entryTypes: ['measure', 'navigation'] });
    }

    // Monitor resize events and adaptation quality
    window.addEventListener('resize', this.debounce(() => {
      this.validateAdaptation();
    }, 250));
  }

  handlePerformanceIssues() {
    console.warn('Performance issues detected, considering fallback method');
    
    if (this.config.primaryMethod === 'scale') {
      this.setupAdapter('viewport');
    } else if (this.config.primaryMethod === 'rem') {
      this.setupAdapter('viewport');
    }
  }

  validateAdaptation() {
    const container = document.querySelector(this.config.containerSelector);
    if (!container) return;

    const containerRect = container.getBoundingClientRect();
    const viewportRect = {
      width: window.innerWidth,
      height: window.innerHeight
    };

    // Check if content is properly visible
    const isContentVisible = containerRect.width > 0 && containerRect.height > 0;
    const isWithinViewport = containerRect.left >= 0 && containerRect.top >= 0;

    if (!isContentVisible || !isWithinViewport) {
      console.warn('Adaptation validation failed, attempting recovery');
      this.setupAdapter(this.config.fallbackMethod);
    }
  }

  // Public API
  switchMethod(method) {
    this.config.primaryMethod = method;
    this.setupAdapter(method);
  }

  getCurrentMethod() {
    return this.config.primaryMethod;
  }

  getAdapterInfo() {
    return {
      method: this.config.primaryMethod,
      config: this.config,
      deviceInfo: this.analyzeDevice(),
      activeAdapter: this.activeAdapter
    };
  }

  debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  destroy() {
    if (this.activeAdapter && this.activeAdapter.destroy) {
      this.activeAdapter.destroy();
    }
    
    if (this.interactionManager && this.interactionManager.destroy) {
      this.interactionManager.destroy();
    }
  }
}

// Initialize the unified adaptation system
const adaptationSystem = new UnifiedAdaptationSystem({
  primaryMethod: 'scale',
  fallbackMethod: 'viewport',
  designWidth: 1920,
  designHeight: 1080,
  containerSelector: '#main-application',
  enableInteractions: true,
  autoDetect: true
});

// Export for global use
window.AdaptationSystem = adaptationSystem;

Is your display size fixed (TV/Monitor/Kiosk)?
├─ YES → Use Scale Solution
└─ NO → Does content need pixel-perfect accuracy?
    ├─ YES → Use REM Solution  
    └─ NO → Use Viewport Units Solution

Mobile Devices (320px - 768px)
├─ Portrait orientation
├─ Landscape orientation
└─ High DPR screens (2x, 3x)

Tablet Devices (768px - 1024px)
├─ iPad standard (1024×768)
├─ iPad Pro (1366×1024)
└─ Surface tablets

Desktop Displays (1024px+)
├─ Standard HD (1920×1080)
├─ 2K displays (2560×1440)
├─ 4K displays (3840×2160)
└─ Ultra-wide (3440×1440, 5120×1440)

Large Screens (Digital Signage)
├─ Standard ratios (16:9, 16:10)
├─ Portrait displays (9:16)
└─ Custom aspect ratios

import { useEffect, useRef } from 'react';
import { ResponsiveScaler } from './adaptation-utils';

function LargeScreenApp() {
  const containerRef = useRef(null);
  const scalerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      scalerRef.current = new ResponsiveScaler({
        designWidth: 1920,
        designHeight: 1080,
        containerSelector: containerRef.current
      });
    }

    return () => {
      if (scalerRef.current?.destroy) {
        scalerRef.current.destroy();
      }
    };
  }, []);

  return (
    <div 
      ref={containerRef}
      className="large-screen-container"
      style={{ width: '1920px', height: '1080px' }}
    >
      {/* Your large screen content */}
    </div>
  );
}

<template>
  <div 
    ref="containerRef"
    class="large-screen-container"
    :style="{ width: '1920px', height: '1080px' }"
  >
    <!-- Your large screen content -->
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ResponsiveScaler } from './adaptation-utils';

const containerRef = ref(null);
let scaler = null;

onMounted(() => {
  if (containerRef.value) {
    scaler = new ResponsiveScaler({
      designWidth: 1920,
      designHeight: 1080,
      containerSelector: containerRef.value
    });
  }
});

onUnmounted(() => {
  if (scaler?.destroy) {
    scaler.destroy();
  }
});
</script>

// Feature detection and fallbacks
const hasViewportUnits = CSS.supports('width', '1vw');
const hasClamp = CSS.supports('font-size', 'clamp(1rem, 2vw, 3rem)');
const hasCustomProperties = CSS.supports('color', 'var(--test)');

if (!hasViewportUnits) {
  // Fall back to rem or scale solutions
  console.warn('Viewport units not supported, using fallback');
}