1. svelte:window要素のプロパティバインドから画面サイズを取得する
2. iframeを使う場合のフレキシブル対応の注意点

        

            - innerWidth: 現在のページのinnerWidthを取得
- innerHeight: 現在のページのinnerHeightを取得
- outerWidth: 現在のページのouterWidthを取得
- outerHeight: 現在のページのouterHeightを取得
- scrollX: 現在の水平方向のスクロール位置を取得か設定
- scrollY: 現在の垂直方向のスクロール位置を取得か設定
- online: オンラインかオンラインの判定(window.navigator.onLine相当)

        

            .
├── index.html
└── src
     ├── App.svelte
     ├── app.scss
     ├── main.ts
     ├── components
     │   ├── player.svelte
     │   ├── title.svelte
     │   └── controller.svelte
     └── lib
          ├── models.ts
          └── GameStage.svelte○
#(その他のファイルは省略)

        

            <script lang="ts">
    //...中略

    //👇innerWidthを保持する変数
    let innerWidth = 0;

    //👇拡大比率(=デフォルトの横幅480pxと現在の横幅の比率)
    let ratio = 1;
    //👇と、ついでにratioとinnerWidthをリアクティブ化して変化を監視・自動更新
    $: ratio = innerWidth/480;

    //...中略
</script>

//...中略

//👇svelte:window要素にinnerWidthをバインド
<svelte:window
    bind:innerWidth
    on:keydown|preventDefault={onKeyDown}
    on:keyup|preventDefault={onKeyUp}/>

<div id="wrapper" on:selectstart|preventDefault>
    //👇ゲームのメイン画面の要素にstyle属性からwidthとheightをリアルタイム修正
    <section style="width: {24*20*ratio}px; height: {24*20*ratio}px;">
        {#each _map as mapx}
            {#each mapx as mapxy}
                <Tile pattern={mapxy.tile_index} left={mapxy.x} top={mapxy.y} ratio={ratio}/>
            {/each}
        {/each}
        <Player left={player.L + slipX} top={player.T + slipY} ratio={ratio}></Player>
    </section>

    //...中略

</div>

<style lang="scss">
    div#wrapper {
        width: 480px;
        height: 740px;
        section {
            //👇スタイルファイルからはwidth/heightを設定しないようにコメントアウト
            // width: 24px * 20;
            // height: 24px * 20;
            box-sizing: border-box;
            border: solid rgb(0, 0, 0) 1px;
            margin: 0;
            position: relative;
            display: block;
        }
    }
</style>

        

            <svelte:window bind:innerWidth={innerWidth}/>
//👇略記形
<svelte:window bind:innerWidth/>

        

            <div class="wrapper">
    <iframe src="埋め込みたいアプリの外部URL" scrolling="no" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

<style lang="scss">
div#wrapper {
    position: relative;
    width: 100%;
    $targetWidth: [外部アプリの表示される幅];
    $targetHeight: [外部アプリの表示される高さ];
    padding: 0 0 calc($targetHeight / $targetWidth * 100%);
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
</style>

        

            1. svelte:window要素のプロパティバインドから画面サイズを取得する
2. iframeを使う場合のフレキシブル対応の注意点