如何设置OpenFL原生目标初始窗口大小，同时让HTML5目标填满浏览器？

1. 调整project.xml配置 #

修改你的project.xml，补充以下配置以适配HTML5目标的高DPI显示和窗口自适应：

<!-- 基础窗口设置，开启可调整与高DPI支持 -->
<window width="960" height="640" allow-high-dpi="true" resizable="true" />

<!-- HTML5专属视口与渲染配置 -->
<set name="html5-viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<set name="html5-stage-scale-mode" value="noScale" />
<set name="html5-stage-align" value="topLeft" />

• allow-high-dpi="true"：解决图形模糊问题，让渲染适配屏幕像素密度
• resizable="true"：确保浏览器窗口调整时触发OpenFL的尺寸变更逻辑
• html5-viewport：锁定浏览器视口缩放，避免显示错乱
• noScale模式配合后续代码手动处理尺寸，从根源避免黑边

2. 代码层处理舞台尺寸与RESIZE事件 #

在主场景类中添加以下逻辑，监听窗口变化并主动调整舞台：

import openfl.display.Stage;
import openfl.events.Event;

// 初始化时绑定监听，同时触发一次初始尺寸调整
stage.addEventListener(Event.RESIZE, onStageResize);
onStageResize(null);

function onStageResize(event:Event):Void {
    // 获取浏览器窗口的实际尺寸
    var winWidth:Int = stage.window.width;
    var winHeight:Int = stage.window.height;

    // 示例：保持960×640的原始比例，填满窗口且无黑边
    var scaleRatio:Float = Math.max(winWidth / 960, winHeight / 640);
    stage.scaleX = stage.scaleY = scaleRatio;
    stage.width = 960;
    stage.height = 640;

    // 若不需要保持比例，可直接让舞台匹配窗口尺寸
    // stage.width = winWidth;
    // stage.height = winHeight;

    // 此处添加你的自定义布局调整逻辑
}

• 手动绑定Event.RESIZE事件，确保窗口调整时触发响应
• 根据需求选择缩放策略：保持原始比例或直接适配窗口，彻底解决黑边问题
• 初始调用尺寸调整方法，保证启动时显示正常

3. 额外优化：移除浏览器滚动条 #

若浏览器出现滚动条，可在project.xml中添加页面样式设置：

<set name="html5-style" value="body { margin: 0; padding: 0; overflow: hidden; }" />

该配置会移除页面边距和滚动条，让OpenFL舞台占满整个浏览器窗口。

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