1920x1080数字标牌网站桌面端自动缩放方案咨询

Great question! For your 1920x1080 digital signage that needs full-screen, viewport-like scaling (mimicking the Ctrl+- browser zoom effect for all text, images, and child divs), here are two reliable approaches—one combining CSS with vanilla JS, another using jQuery for simpler event management:

CSS + Vanilla JS Approach #

This method uses a fixed-size container for your design, then dynamically scales it to fit the window while maintaining the 16:9 aspect ratio.

1. Wrap all content in a container
   First, nest your entire signage content inside a container with your target resolution:

   .signage-container {
     width: 1920px;
     height: 1080px;
     position: absolute;
     top: 0;
     left: 0;
     transform-origin: top left; /* Ensures scaling starts from the top-left corner */
     transition: transform 0.3s ease; /* Smooth scaling animation */
   }
   
   body {
     margin: 0;
     overflow: hidden; /* Hide scrollbars from scaling overflow */
   }
   

2. Add scaling logic
   Use a small script to calculate the correct scale ratio on page load and window resize:

   function scaleSignage() {
     const container = document.querySelector('.signage-container');
     const windowRatio = window.innerWidth / window.innerHeight;
     const designRatio = 1920 / 1080; // 16:9
   
     let scale;
     if (windowRatio > designRatio) {
       // Window is wider than 16:9—scale to fit height
       scale = window.innerHeight / 1080;
     } else {
       // Window is taller than 16:9—scale to fit width
       scale = window.innerWidth / 1920;
     }
   
     container.style.transform = `scale(${scale})`;
   }
   
   // Run on page load
   window.addEventListener('load', scaleSignage);
   // Run on window resize (with debounce to avoid excessive calls)
   let resizeTimeout;
   window.addEventListener('resize', () => {
     clearTimeout(resizeTimeout);
     resizeTimeout = setTimeout(scaleSignage, 100);
   });
   

jQuery Plugin-Style Approach #

If you're already using jQuery, this approach simplifies event handling and keeps your code clean:

1. Include the jQuery script (if not already present)

2. Add the scaling function

   (function($) {
     $.fn.signageScale = function(options) {
       const settings = $.extend({
         designWidth: 1920,
         designHeight: 1080,
         transitionSpeed: 300
       }, options);
   
       const $container = this;
       $container.css({
         width: settings.designWidth,
         height: settings.designHeight,
         position: 'absolute',
         top: 0,
         left: 0,
         'transform-origin': 'top left',
         transition: `transform ${settings.transitionSpeed}ms ease`
       });
       $('body').css({ margin: 0, overflow: 'hidden' });
   
       function scale() {
         const windowRatio = $(window).width() / $(window).height();
         const designRatio = settings.designWidth / settings.designHeight;
         const scale = windowRatio > designRatio ? 
           $(window).height() / settings.designHeight : 
           $(window).width() / settings.designWidth;
         
         $container.css('transform', `scale(${scale})`);
       }
   
       // Initialize and listen for resize
       $(window).on('load', scale);
       let resizeTimeout;
       $(window).on('resize', () => {
         clearTimeout(resizeTimeout);
         resizeTimeout = setTimeout(scale, 100);
       });
   
       return this;
     };
   }(jQuery));
   

3. Initialize on your container

   $(document).ready(function() {
     $('.signage-container').signageScale();
     // Optional: Pass custom settings if needed
     // $('.signage-container').signageScale({ transitionSpeed: 500 });
   });
   

Key Notes #

• Transform Origin: Setting transform-origin: top left ensures your content scales without shifting position, just like browser zoom.
• Debouncing: Adding a small delay to the resize event prevents the script from running too frequently when the user resizes the window, improving performance.
• Smooth Transitions: The CSS transition makes the scaling feel natural instead of jumping instantly.

内容的提问来源于stack exchange，提问作者md123