レスポンシブデザインがうまくいかない

As-Is

指定したピクセルサイズでの表示となっている。

To-Be

閲覧するデバイスに拘わらず、画面の縦横いっぱいに表示されるようにしたい。

発生している問題・エラーメッセージ

widthやheightを「100%」や「100vh」等としても上手く表示されない。

ソースコード

<!DOCTYPE html>
  <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0,width=device-width, height=device-height" />
        <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
        <style>
            body {
                width: 100vw;
                height: 100vh;
            }
            #mapContainer{
                width:100vw;
                height:100vh;
            }

    </head>
    <body>
      <div id="mapContainer"></div>

        <script>
            var platform = new H.service.Platform({
              'apikey': 'xxxxxxxxxxxxxxxxxxx'
            });


            // configure an OMV service to use the `core` enpoint
            var omvService = platform.getOMVService({path:  'v2/vectortiles/core/mc'});
            var baseUrl = 'http://js.api.here.com/v3/3.1/styles/omv/oslo/japan/';

            // create a Japan specific style
            var style = new H.map.Style(`${baseUrl}normal.day.yaml`, baseUrl);

            // instantiate provider and layer for the basemap
            var omvProvider = new H.service.omv.Provider(omvService, style);
            var omvlayer = new H.map.layer.TileLayer(omvProvider, {max: 22});

            // instantiate (and display) a map:
            var map = new H.Map(
                document.getElementById('mapContainer'),
                omvlayer,
                {
                  zoom: 18,
                  center: {lat: 35.674, lng: 139.7664}
                });
        </script>
    </body>
</html>

試したこと

CSSの改変

miyabi_pudding

2020/07/02 05:29

> 上手く表示されない画像でいいので、表示したい理想の画面と、現状の画面の状態のキャプチャを質問本文に貼りつけて下さい。

dbrow

2020/07/02 05:44

追記しました。（Tobeに関しては文章で記載しています。）

Lhankor_Mhy

2020/07/02 06:21

質問と関係ないですが、HERE WeGo の地図ってほんと真っ白なんですね……地名も間違ってるし……びっくりしました。

kei344

2020/07/02 06:30

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

miyabi_pudding

2020/07/02 06:54

dbrow

2020/07/02 08:51

>miyabi_takatsuk <style>の閉じタグでした..ご指摘ありがとうございます。この場合はご回答をベストアンサーとさせていただきつつ、私の返信で解決方法を記載させていただきます。齟齬あればお教えください。 >kei344 今更gyazoにハマっているだけなので、そうですね、画像を張るようにします。 >Lhankor_Mhy まだまだアップデートするようなので、今後に期待しています。

miyabi_pudding

2020/07/02 10:00 編集

あら。ひとまず、解決できてよかったです。いや、自己解決投稿で、解決にされてはいかがでしょうか？私の回答自体は別の問題提起で、外してますし。

miyabi_pudding

2020/07/03 00:41

dbrowさん > もし、このコメント欄を回答とお思いなら、回答欄ではないので、解決したなら、自己解決の投稿をして、質問を閉じましょう。