refactor: 横屏提示与缩放改为组件标签（OrientationGuard）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/course-runtime/canvas/useCanvasScale.ts

@@ -6,17 +6,25 @@ interface CanvasScaleOptions {
 	maxScale: number;
 }
 
+function getViewportSize() {
+	if (typeof window === "undefined") {
+		return null;
+	}
+	return {
+		width: window.visualViewport?.width ?? window.innerWidth,
+		height: window.visualViewport?.height ?? window.innerHeight,
+	};
+}
+
 function calculateScale({
 	width,
 	height,
 	maxScale,
 }: CanvasScaleOptions): number {
 	if (typeof window === "undefined") return maxScale;
-	return Math.min(
-		window.innerWidth / width,
-		window.innerHeight / height,
-		maxScale,
-	);
+	const viewport = getViewportSize();
+	if (!viewport) return maxScale;
+	return Math.min(viewport.width / width, viewport.height / height, maxScale);
 }
 
 export function useCanvasScale({
@@ -33,11 +41,15 @@ export function useCanvasScale({
 			setScale(calculateScale({ width, height, maxScale }));
 		updateScale();
 		window.addEventListener("resize", updateScale);
+		window.addEventListener("orientationchange", updateScale);
 		window.visualViewport?.addEventListener("resize", updateScale);
+		window.visualViewport?.addEventListener("scroll", updateScale);
 
 		return () => {
 			window.removeEventListener("resize", updateScale);
+			window.removeEventListener("orientationchange", updateScale);
 			window.visualViewport?.removeEventListener("resize", updateScale);
+			window.visualViewport?.removeEventListener("scroll", updateScale);
 		};
 	}, [height, maxScale, width]);