NWJS原生应用窗口缩放问题求助：16:9比例适配异常

Hey there, let's tackle your NWJS resizing issue step by step. From your code snippet, I can spot a couple of key problems causing the abnormal behavior, plus some NWJS-specific quirks we need to account for.

First, Let's Fix the Obvious Issues #

• Broken Aspect Ratio Calculation: Your code cuts off at h = 9*window.innerWidth... — that's definitely wrong for a 16:9 ratio. For width-to-height 16:9, the height should be width * 9 / 16. If you want to prioritize height (e.g., when users resize vertically), calculate width as height * 16 / 9 instead.
• Resize Loop Risk: Adjusting the window size inside your resizeCanvas function will trigger another resize event, leading to jittery behavior or infinite loops. We need a flag to prevent this.
• Debounce Refinement: Your debounce setup is on the right track, but we'll make it more robust to avoid timing-related glitches.

Corrected Code Example #

var stage, w, h, doit, isResizing = false; // Flag to block looped resizes

// Debounced resize handler
window.onresize = function() {
    clearTimeout(doit);
    doit = setTimeout(resizeCanvas, 100);
};

function resizeCanvas() {
    // Exit if we're already adjusting the window to avoid loops
    if (isResizing) return;
    isResizing = true;

    const currentWidth = window.innerWidth;
    const currentHeight = window.innerHeight;

    // Calculate 16:9 target dimensions
    // Option 1: Prioritize width (keep width, adjust height)
    const targetHeight = Math.round(currentWidth * 9 / 16);
    // Option 2: Prioritize height (keep height, adjust width)
    // const targetWidth = Math.round(currentHeight * 16 / 9);

    // Adjust NWJS window size only if needed
    if (targetHeight !== currentHeight) {
        window.resizeTo(currentWidth, targetHeight);
    }

    // Update your canvas/stage dimensions
    w = currentWidth;
    h = targetHeight;
    if (stage) {
        stage.width = w;
        stage.height = h;
        // Add any stage refresh logic here (e.g., redrawing content)
    }

    // Reset flag after resize completes to allow future adjustments
    setTimeout(() => {
        isResizing = false;
    }, 50);
}

// Initialize dimensions on app load
window.onload = function() {
    resizeCanvas();
};

Key Improvements Explained #

• Loop Prevention: The isResizing flag stops the function from re-running while we're actively adjusting the window, eliminating jitter and infinite loops.
• Correct Aspect Ratio Math: Proper 16:9 calculation ensures the window stays in the desired proportion.
• NWJS-Specific Control: Using window.resizeTo() adjusts the native window size (not just the internal canvas) for a true native app experience.
• Robust Debounce: The existing debounce stays, but the flag ensures we don't re-trigger logic prematurely if the resize event fires again mid-adjustment.

Bonus NWJS Native Tip #

If you want to lock the aspect ratio from the start (instead of correcting it after resize), add the aspect property to your package.json under the window section:

"window": {
    "aspect": "16:9",
    "resizable": true
}

This native NWJS feature handles aspect ratio locking automatically, which is more efficient than manual JavaScript handling.

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